- To use the RichEdit control in an Blazor application, you need to have a Universal, DXperience, ASP.NET or DevExtreme subscription.
- Versions of the devexpress npm packages should be identical (their major and minor versions should be the same).
This example illustrates a possible way to integrate the Diagram widget into Blazor applications. This can be done as follows:
- Create a new Blazor application using recommendations from the following topic: Get started with ASP.NET Core Blazor.
- Install the necessary DevExtreme and Diagram resources by following steps from the following help topic: Getting Started with Diagram.
- Register the resources from the previous step. In Blazor server applications, use the
Pages/_Host.cshtmlfile's HEAD section. In Blazor WebAssembly, use thewwwroot/index.htmlfile's HEAD section.
<head>
<!--...-->
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/20.1.4/css/dx.common.css">
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/20.1.4/css/dx.light.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/20.1.4/css/dx-diagram.min.css">
<script src="https://cdn3.devexpress.com/jslib/20.1.4/js/dx-diagram.min.js"></script>
<script type="text/javascript" src="js/diagram-init.js"></script>
<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.1.4/js/dx.all.js"></script>
</head>- Create the *wwwroot/js/diagram-init.js file and implement the logic to initialize the Diagram widget:
window.JsFunctions = {
InitDiagram: function () {
var diagram = $("#diagram").dxDiagram()
.dxDiagram("instance");
$.ajax({
url: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/data/diagram-flow.json",
dataType: "text",
success: function (data) {
diagram.import(data);
}
});
}
};- Invoke the created
InitDiagrammethod in the OnAfterRender lifecycle event handler:
protected override void OnAfterRender(bool firstRender)
{
JSRuntime.InvokeAsync<object>("JsFunctions.InitDiagram");
}Files to look at:
(you will be redirected to DevExpress.com to submit your response)