Skip to main content
BuyLog In
Blazor
Search in…
Docs > Common Concepts > Add DevExtreme Widgets to an Application
A newer version of this page is available. .
All docs
V21.2
Blazor Components
Prerequisites
Supported Browsers
Get Started
Troubleshooting
Demos
Videos
Common Concepts
Two-Way Data Binding
Update Data in Data-Bound Components
Localization
Customize Appearance
Add Components to the Toolbox
Reuse and Customize Components
Add DevExtreme Widgets to an Application
Content Security Policy
Validate User Input
Bind Components to Data with Entity Framework Core
Redistribution and Deployment
Grid
Pivot Grid
Charts
Reports
Scheduler
Rich Text Editor
Data Editors
Buttons
Navigation and Layout
File Management
Dashboard
XAF (App UI & Security API)
Maintenance Mode
API Reference
Download CHM

Add DevExtreme Widgets to an Application

  • 6 minutes to read

Blazor applications allow you to use external JavaScript libraries. For example, you can integrate DevExtreme widgets into your application. Follow the steps below to do this:

  1. Include static files for JavaScript and DevExtreme libraries, and DevExtreme themes in the following files:

    • Blazor server: _Host.cshtml (for .NET5) or _Layout.cshtml (for .NET6)
    • Blazor WebAssembly: index.html

    For example, if you need to add the HtmlEditor and CheckBox widgets, include the following files:

    <head>
    <!-- ... -->
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.4.1.min.js"></script>

    <!-- DevExtreme themes -->
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/21.2.15/css/dx.common.css">
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/21.2.15/css/dx.light.css">
    <!-- HTML Editor scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/devextreme-quill/1.5.7/dx-quill.min.js"></script>

    <!-- DevExtreme library -->
    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/21.2.15/js/dx.all.js"></script>
    <!-- ... -->
</head>

    For more information on how to use CDN to include DevExtreme scripts and styles, refer to the following article: Distribution Channels - CDN.

  2. In the same file (_Host.cshtml, _Layout.cshtml, or index.html), implement functions that render DevExtreme widgets. Save their instances in global variables if required:

    <head>
    <!-- ... -->
    <script>
        var htmlEditor;
        function renderDevExtremeControls(htmlEditorCssClass, checkBoxContainerID) {
            renderHtmlEditor(htmlEditorCssClass);
            renderCheckBox(checkBoxContainerID);
        }

        function renderHtmlEditor(container) {
            htmlEditor = $(container).dxHtmlEditor({
                // Your configuration of the HTML Editor component
            }).dxHtmlEditor("instance");
        }

        function renderCheckBox(container) {
            $(container).dxCheckBox({
                // Your CheckBox configuration
            });
        }
    </script>
    <!-- ... -->
</head>

  3. To ensure that theme settings are applied to all page elements and not only DevExtreme UI components, add the dx-viewport class to the <body> tag:

    <body class="dx-viewport">

  4. Declare containers for DevExtreme widgets in the Razor markup:

    <div class="options">
    <div class="caption">Options</div>
    <div class="option">
        <div id="multiline"></div>
    </div>
</div>


<div class="html-editor">
</div>

  5. Use JSInterop to render the widgets. For example, if you need to do it on a page load, override the OnAfterRenderAsync method:

    @inject IJSRuntime JSRuntime;
@* ... *@

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender) {
        await JSRuntime.InvokeVoidAsync("renderDevExtremeControls", ".html-editor", "#multiline");
    }
}

You can now use DevExtreme components in your Blazor Application:

Dxt Components in Blazor App

You can use the built-in DevExtreme API in your Blazor application. Create a JavaScript function that contains a DevExtreme API member and use InvokeAsync and InvokeVoidAsync methods to call the function. The code below gets the first 40 characters of the HTML Editor’s text:

@code {
    @* ... *@
    private string text;
    protected async Task GetValueFromDXT() {
        text = await JSRuntime.InvokeAsync<string>("getHTMLEditorText", 0, 40);
    }
}

For more information on how to work with JavaScript in Blazor applications, refer to the following Microsoft article: JSInterop.

Complete Code (Blazor Server)

Show Complete Code
@page "/"
@inject IJSRuntime JSRuntime;

<div class="options">
    <div class="caption">Options</div>
    <div class="option">
        <div id="multiline"></div>
    </div>
</div>


<div class="html-editor"></div>

@code {
   protected override async Task OnAfterRenderAsync(bool firstRender) {
       await JSRuntime.InvokeVoidAsync("renderDevExtremeControls", ".html-editor", "#multiline");
   }
  private string text;
  protected async Task GetValueFromDXT() {
      text = await JSRuntime.InvokeAsync<string>("getHTMLEditorText", 0, 40);
  }
}