Skip to main content

Add DevExtreme Widgets to an Application

  • 4 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: _Layout.cshtml
    • 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/22.1.4/css/dx.common.css">
        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/22.1.4/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/22.1.4/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 (_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);
  }
}