Example T1069428
Visible to All Users

Blazor - Use DevExtreme Circular Gauge in a Blazor Application

This example shows how to embed DevExtreme widgets into your Blazor application.

Circular Gauge in DevExpress Blazor App

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

DxtGaugeInBlazor/DevExtremeComponents/DevExtremeGauge.razor
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(); } }
DxtGaugeInBlazor/DevExtremeComponents/DevExtremeGauge.razor.js
JavaScript
export 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); }
DxtGaugeInBlazor/Components/Pages/Gauge.razor
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; } } }
DxtGaugeInBlazor/Components/App.razor
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); }

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.