Blazor - Use DevExtreme Circular Gauge in a Blazor Application

This example shows how you can embed DevExtreme widgets into your Blazor application. You can use the same methods to integrate any JavaScript-based libraries.

Implementation Details

The example solution contains JSWidgetsRCL and DxtComponentsInBlazor projects. The first project wraps the DevExtreme Circular Gauge widget.

DevExtremeGauge.razor and DevExtremeGauge.razor.js files store wrapper implementation. The widget also renders the DevExtremeResources.razor component. This component loads DevExtreme resources when you open a page with a DevExtreme component for the first time.

The DxtGaugeInBlazor project references JSWidgetsRCL. This allows you to use the wrapper as a regular Blazor component. The following code adds a DevExtremeGauge wrapper component:

<DevExtremeGauge />

The DevExpress Blazor UI Component Library includes several DevExtreme-based components (for example, DxHtmlEditor or DxMap). Refer to class descriptions for more information.

Files to Review

• DevExtremeResources.razor
• DevExtremeResources.razor.js
• DevExtremeGauge.razor

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)