Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
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.FlowData @(Html.DevExtreme().Diagram() .ID("diagram") .Nodes(ns => ns .DataSource(d => d .Array() .Key("ID") .Data(Model.Nodes) ) .KeyExpr("ID") .TextExpr("Text") .TypeExpr("Type") .AutoLayout(al => al .Type(DiagramDataLayoutType.Layered) ) ) .Edges(ns => ns .DataSource(d => d .Array() .Key("ID") .Data(Model.Edges) ) .KeyExpr("ID") .FromExpr("FromID") .ToExpr("ToID") .TextExpr("Text") ) .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 FlowData { Nodes = SampleData.FlowNodes, Edges = SampleData.FlowEdges }); } } }
#diagram { height: 725px; }