This example shows how to embed DevExtreme widgets into your Blazor application.
Implementation Details
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:
Razor<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" />
<!-- ... -->
</head>
@code{
private string AppendVersion(string path) => FileVersionProvider.AddFileVersionToPath("/", path);
}
DevExtremeGauge.razor and DevExtremeGauge.razor.js files wrap the DevExtreme Circular Gauge widget. During the wrapper's first render, the wrapper executes the LoadDxResources method to force the Resource Manager to load all client scripts:
C#protected override async Task OnAfterRenderAsync(bool firstRender) {
if(firstRender) {
await JS.LoadDxResources();
ClientModule = await JS.InvokeAsync<IJSObjectReference>("import", "./DevExtremeComponents/DevExtremeGauge.razor.js");
ClientGauge = await ClientModule.InvokeAsync<IJSObjectReference>("initializeGauge", Gauge, DataSource);
}
await base.OnAfterRenderAsync(firstRender);
}
You can use the wrapper as a regular Blazor component. The following code adds a DevExtremeGauge
wrapper component to a page:
Razor<DevExtremeGauge />
The DevExpress Blazor UI Component Library includes multiple DevExtreme-based components (for example, DxHtmlEditor or DxMap). Refer to class descriptions for more information.
Files to Review
Documentation
Add JavaScript-Based Components to an Application
Does this example address your development requirements/objectives?
(you will be redirected to DevExpress.com to submit your response)
Example Code
Razor@using Microsoft.JSInterop
@using DevExpress.Blazor
@inject IJSRuntime JS
@implements IAsyncDisposable
<div @ref="Gauge"></div>
@code {
ElementReference Gauge { get; set; }
IJSObjectReference ClientModule { get; set; }
IJSObjectReference ClientGauge { get; set; }
[Parameter]
public object DataSource { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender) {
if(firstRender) {
await JS.LoadDxResources();
ClientModule = await JS.InvokeAsync<IJSObjectReference>("import", "./DevExtremeComponents/DevExtremeGauge.razor.js");
ClientGauge = await ClientModule.InvokeAsync<IJSObjectReference>("initializeGauge", Gauge, DataSource);
}
await base.OnAfterRenderAsync(firstRender);
}
protected override async Task OnParametersSetAsync() {
if(ClientGauge != null) {
await ClientModule.InvokeVoidAsync("changeGaugeDataSource", ClientGauge, DataSource);
}
}
async ValueTask IAsyncDisposable.DisposeAsync() {
if(ClientGauge != null)
await ClientGauge.DisposeAsync();
if(ClientModule != null)
await ClientModule.DisposeAsync();
}
}
JavaScriptexport async function initializeGauge(element, datasource) {
const value = !!datasource ? datasource.mean : null;
const subValues = !!datasource ? [ datasource.min, datasource.max] : [ ];
return new DevExpress.viz.dxCircularGauge(element, {
scale: {
startValue: 10,
endValue: 40,
tickInterval: 5,
label: {
customizeText(arg) {
return `${arg.valueText} °C`;
},
},
},
rangeContainer: {
ranges: [
{ startValue: 10, endValue: 20, color: '#0077BE' },
{ startValue: 20, endValue: 30, color: '#E6E200' },
{ startValue: 30, endValue: 40, color: '#77DD77' },
],
},
tooltip: { enabled: true },
title: {
text: 'Temperature in the Greenhouse',
font: { size: 28 },
},
value: value,
subvalues: subValues
});
}
export async function changeGaugeDataSource(gauge, datasource) {
const value = !!datasource ? datasource.mean : null;
const subValues = !!datasource ? [ datasource.min, datasource.max] : [ ];
gauge.value(value);
gauge.subvalues(subValues);
}
Razor@page "/gauge"
@using DxtGaugeInBlazor.DevExtremeComponents
@rendermode InteractiveServer
<DevExtremeGauge DataSource="DataSource" />
@code {
object DataSource { get; set; }
protected override void OnInitialized() {
DataSource = new GaugeValue() { Min = 28, Max = 38, Mean = 35 };
}
public class GaugeValue {
public double Min { get; set; }
public double Max { get; set; }
public double Mean { get; set; }
}
}
Razor@using Microsoft.AspNetCore.Mvc.ViewFeatures
@inject IFileVersionProvider FileVersionProvider
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link href=@AppendVersion("_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css") rel="stylesheet" />
<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()
<link href=@AppendVersion("css/site.css") rel="stylesheet" />
<link href=@AppendVersion("DxtGaugeInBlazor.styles.css") rel="stylesheet" />
<HeadOutlet />
</head>
<body>
<Routes></Routes>
<script src="_framework/blazor.web.js"></script>
</body>
</html>
@code{
private string AppendVersion(string path) => FileVersionProvider.AddFileVersionToPath("/", path);
}