parmidasoftDev / Devextreme_Blazor-use-gauge-map-html-editor

Incorporate a DevExtreme Map widget in a Blazor application.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Blazor - Use Gauges, HTML Editor, and Map 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.

HTML Editor in DevExpress Blazor App

Implementation Details

The example solution contains JSWidgetsRCL and DxtComponentsInBlazor projects. The first project wraps the following DevExtreme widgets:

For each widget, DevExtreme.razor and DevExtreme.razor.js files store wrapper implementation. Look at DevExtremeHtmlEditor.razor for an example on how to implement an event. The wrapper registers a custom event handler, implements it on the Blazor side and maps it to the corresponding DevExtreme event handler. You can implement other events in the same way.

Each 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 DxtComponentsInBlazor project references JSWidgetsRCL. This allows you to use wrappers as regular Blazor components. The following code adds a DevExtremeMap wrapper component:

<DevExtremeMap />

Files to Review

Documentation

Add JavaScript-Based Components to an Application

About

Incorporate a DevExtreme Map widget in a Blazor application.

License:Other


Languages

Language:HTML 69.8%Language:JavaScript 22.0%Language:C# 8.2%