This example adds the DevExtreme Diagram widget into your Blazor application.
DevExtreme widgets require the use of DevExtreme scripts and stylesheets. You must register scripts in the following order:
- JQuery library (
https://code.jquery.com/jquery-3.5.1.min.js>) - Custom or component-specific scripts, for example, diagram (
https://cdn3.devexpress.com/jslib/25.1.3/js/dx-diagram.min.js) - Base DevExtreme script (
https://cdn3.devexpress.com/jslib/25.1.3/js/dx.all.js)
The DevExpress Blazor Resource Manager automatically registers JQuery and standard DevExtreme scripts if your project includes the DevExpress.Blazor package. To load component-specific DevExtreme resources correctly, you must:
- Unregister JQuery and base DevExtreme scripts using the
DxResourceManager.RegisterScriptsmethod. - Reference scripts in the
<head>section of the Components/App.razor file.
<head>
<!--...-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn3.devexpress.com/jslib/25.1.3/js/dx-diagram.min.js"></script>
<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/25.1.3/js/dx.all.js"></script>
@DxResourceManager.RegisterTheme(ThemesService.ActiveTheme)
@DxResourceManager.RegisterScripts((config) => {
config.Unregister(CommonResources.JQueryJS);
config.Unregister(CommonResources.DevExtremeJS);
})
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/25.1.3/css/dx-diagram.min.css">
<link href=@AppendVersion("https://cdn3.devexpress.com/jslib/25.1.3/css/dx.fluent.blue.light.css") rel="stylesheet" />
<!--...-->
</head>Implement a Blazor component that wraps DevExtreme Diagram. The wrapper consists of two files:
-
DevExtremeDiagram.razor.js configures Diagram settings (binds the component to a data model defined in the ProjectTask.cs file).
export async function initializeDiagram(element, dataSource) { const projectTasks = !!dataSource ? dataSource : null; return $(element).dxDiagram({ nodes: { dataSource: new DevExpress.data.ArrayStore({ key: 'id', data: projectTasks, }), keyExpr: "id", parentKeyExpr: "parent_ID", textExpr: "task_Name", }, }); }
-
DevExtremeDiagram.razor renders the Diagram. In this file, call the LoadDxResources method to force the
Resource Managerto load all client scripts.<div @ref="Diagram"></div>
protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await JS.LoadDxResources(); ClientModule = await JS.InvokeAsync<IJSObjectReference>("import", "./DevExtremeComponents/DevExtremeDiagram.razor.js"); ClientDiagram = await ClientModule.InvokeAsync<IJSObjectReference>("initializeDiagram", Diagram, DataSource); } await base.OnAfterRenderAsync(firstRender); }
Use the wrapper as a standard Blazor component. The following code adds a DevExtremeDiagram wrapper to the page and binds it to data:
<DevExtremeDiagram DataSource="DataSource" />
@code {
List<ProjectTask> DataSource { get; set; }
protected override void OnInitialized() {
DataSource = new() {
new() { ID = 1, Task_Name = "Project Planning", Description = "Define project scope and goals" },
new() { ID = 2, Parent_ID = 1, Task_Name = "Requirement Analysis", Description = "Gather and document requirements" },
// ...
};
}
}- Get Started with DevExtreme jQuery/JS
- Get Started with JavaScript/jQuery Diagram
- Add DevExtreme Components to a Blazor Application
- DxResourceManager
(you will be redirected to DevExpress.com to submit your response)