Your search did not match any results.
Diagram

Data Sources

Note that the Diagram widget is in the community technology preview (CTP) development stage.

The Diagram widget allows you to import data from a data source into a data toolbox.

Use the createDataSource method to create data toolbox items based on an external data source. End users can drag data items from the toolbox and drop them onto a canvas to build a diagram.

If a data source provides information about node relations, specify the layout option to generate a diagram automatically.

jQuery

ASP.NET Core

<link rel="stylesheet" type="text/css" href="https://unpkg.com/devexpress-diagram@0.0.21/dx.diagram.css" /> <script type="text/javascript"> $(function () { var diagram = $("#diagram").dxDiagram() .dxDiagram("instance"); diagram.createDataSource({ key: "0", name: "Employees", nodes: { dataSource: employees, keyExpr: "ID", textExpr: function (item) { return item && item.Full_Name.replace(" ", "\n"); }, parentKeyExpr: "Head_ID" }, layout: "tree" }); }); </script> <div id="diagram"></div> <script src="~/data/diagramEmployees.js"></script> <script src="https://unpkg.com/devexpress-diagram@0.0.21/dx.diagram.js"></script>
using Microsoft.AspNetCore.Mvc; namespace DevExtreme.NETCore.Demos.Controllers { public class DiagramController : Controller { public IActionResult DataSources() { return View(); } } }