Your search did not match any results.
Diagram

Web API Service

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

This demo shows the Diagram widget loading data from a Web API service.

Copy to CodePen
Apply
Reset
$(function() { var url = "https://js.devexpress.com/Demos/Mvc/api/DiagramEmployees"; var dataSource = DevExpress.data.AspNet.createStore({ key: "ID", loadUrl: url + "/Employees", insertUrl: url + "/InsertEmployee", updateUrl: url + "/UpdateEmployee", deleteUrl: url + "/DeleteEmployee", onBeforeSend: function(method, ajaxOptions) { ajaxOptions.xhrFields = { withCredentials: true }; }, onInserting: function(values) { values["ID"] = 0; values["HeadID"] = 0; values["Title"] = "New Position"; values["Prefix"] = "Mr"; values["FullName"] = "New Employee"; values["City"] = "LA"; values["State"] = "CA"; values["HireDate"] = new Date(); } }) $("#diagram").dxDiagram({ nodes: { dataSource: dataSource, keyExpr: "ID", textExpr: "Title", parentKeyExpr: "HeadID" }, toolbox: { groups: ["general"] } }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/19.2.4/js/dx-diagram.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.light.css" /> <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx-diagram.min.css" /> <script src="https://cdn3.devexpress.com/jslib/19.2.4/js/dx.all.js"></script> <script src="https://unpkg.com/devextreme-aspnet-data@2.5.1/js/dx.aspnet.data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="diagram"> </div> </div> </body> </html>
#diagram { height: 725px; }