Your search did not match any results.

Node and Edge Arrays


This demo shows the Diagram widget's capability to load an external tree or a graph structure from two data sources: an array of shapes and an array of shape connectors. The connector is specified by the shape's ID attributes. The Diagram transforms information from the data sources into a tree layout view.

@model DevExtreme.NETCore.Demos.Models.SampleData.OrgData @(Html.DevExtreme().Diagram() .ID("diagram") .Nodes(ns => ns .DataSource(d => d .Array() .Key("this") .Data(Model.Items) ) .KeyExpr("ID") .TextExpr("Text") .TypeExpr("Type") .AutoLayout(al => al .Type(DiagramDataLayoutType.Tree) ) ) .Edges(ns => ns .DataSource(d => d .Array() .Key("this") .Data(Model.Links) ) .KeyExpr("ID") .FromExpr("From") .ToExpr("To") ) .Toolbox(t => t .Groups(g => g .Add().Category(DiagramShapeCategory.General).Title("General") ) ) )
using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; namespace DevExtreme.NETCore.Demos.Controllers { public class DiagramController : Controller { public IActionResult NodesAndEdgesArrays() { return View(new OrgData { Items = SampleData.OrgItems, Links = SampleData.OrgLinks }); } } }
#diagram { height: 725px; }