This example adds the DevExtreme Diagram widget into your Blazor application.
DevExtreme widgets require the use of DevExtreme scripts and stylesheets. We recommend that you use npm to incorporate DevExtreme into the application.
You must register scripts in the following order:
- JQuery library (jquery.min.js)
- Custom or component-specific scripts, for example, diagram (dx-diagram.min.js)
- Base DevExtreme script (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="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/dx-diagram.min.js"></script>
<script type="text/javascript" src="/js/dx.all.js"></script>
@DxResourceManager.RegisterTheme(Themes.Fluent)
@DxResourceManager.RegisterScripts((config) => {
config.Unregister(CommonResources.JQueryJS);
config.Unregister(CommonResources.DevExtremeJS);
})
<link href=@AppendVersion("css/site.css") rel="stylesheet" />
<link href=@AppendVersion("css/dx.fluent.blue.light.css") rel="stylesheet" />
<link href=@AppendVersion("css/dx-diagram.min.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
- Blazor - Use DevExtreme Circular Gauge in a Blazor Application
- Blazor - Use DevExtreme Slider in Blazor Applications
(you will be redirected to DevExpress.com to submit your response)