Node and Edge Arrays

Documentation

This demo shows the Diagram component'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.

See more Hide details

Prev Demo Next Demo

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Send Feedback

Thank you!
We appreciate your feedback.

Backend API

@model DevExtreme.MVC.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 System.Web.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; namespace DevExtreme.MVC.Demos.Controllers { public class DiagramController : Controller { public ActionResult NodesAndEdgesArrays() { return View(new FlowData { Nodes = SampleData.FlowNodes, Edges = SampleData.FlowEdges }); } } }

#diagram { height: 725px; }