Add DevExtreme Components to a Blazor Application
- 2 minutes to read
This article describes how to embed DevExtreme widgets into your Blazor application. Note that DevExtreme widgets ship with the same DevExpress subscription as our Blazor UI Controls.
DevExtreme widgets require DevExtreme scripts and stylesheets. The DevExpress Resource Manager automatically registers the DevExtreme script if your project includes the DevExpress.Blazor package. To add DevExtreme stylesheets, reference them in the App.razor file:
<head>
<link href=@AppendVersion("https://cdn3.devexpress.com/jslib/24.2.3/css/dx.common.css") rel="stylesheet" />
<link href=@AppendVersion("https://cdn3.devexpress.com/jslib/24.2.3/css/dx.material.purple.light.compact.css") rel="stylesheet" />
@DxResourceManager.RegisterScripts()
<!-- ... -->
</head>
@code{
private string AppendVersion(string path) => FileVersionProvider.AddFileVersionToPath("/", path);
}
Then you need to implement Blazor components - wrappers for JavaScript widgets. Each wrapper consists of two files:
- A
*.razorfile that renders a DevExtreme component and processes input parameters. This file implements JavaScript-based API on the Blazor side. - A
*.razor.jsfile that configures settings for a DevExtreme component.
During the wrapper’s first render, call the LoadDxResources method to force the DevExpress Resource Manager to load all client scripts:
protected override async Task OnAfterRenderAsync(bool firstRender) {
if(firstRender) {
await JS.LoadDxResources();
// ...
}
await base.OnAfterRenderAsync(firstRender);
}
You can use wrappers as regular Blazor components. The following code adds a DevExtremeGauge wrapper component:
<DevExtremeGauge />
Our GitHub example implements a Circular Gauge wrapper. You can integrate other components in the same manner. Refer to the following repository for example code: Use DevExtreme Circular Gauge in a Blazor Application.
This integration method works best when you need to implement only a few members in your wrapper.
For more information on how to work with JavaScript in Blazor applications, refer to the following Microsoft article: ASP.NET Core Blazor JavaScript interoperability (JS interop).