Diagram - OrgChart Shapes

The Diagram component provides shapes with images that are specially designed for use in OrgCharts. You can select a shape with the following image positions: on the left, right, or top of the shape.

In this demo, the Diagram is bound to a data source. The imageUrlExpr property specifies the name of a field that provides a path to images.

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.

Thank you for the feedback!

Backend API

@model DevExtreme.MVC.Demos.Models.SampleData.OrgData @(Html.DevExtreme().Diagram() .ID("diagram") .Nodes(ns => ns .DataSource(d => d .Array() .Key("ID") .Data(Model.Items) ) .KeyExpr("ID") .TextExpr("Text") .TypeExpr("Type") .ImageUrlExpr("Picture") .AutoLayout(al => al .Type(DiagramDataLayoutType.Tree) .Orientation(DiagramDataLayoutOrientation.Horizontal) ) ) .Edges(ns => ns .DataSource(d => d .Array() .Key("ID") .Data(Model.Links) ) .KeyExpr("ID") .FromExpr("From") .ToExpr("To") ) .Toolbox(t => t .Groups(g => { g.Add().Category(DiagramShapeCategory.General).Title("General"); g.Add().Category(DiagramShapeCategory.OrgChart).Title("Organizational Chart").Expanded(true); } ) ) )

using System.Web.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; namespace DevExtreme.MVC.Demos.Controllers { public class DiagramController : Controller { public ActionResult ImagesInShapes() { return View(new OrgData { Items = SampleData.OrgItemsWidthImage, Links = SampleData.OrgLinksWithImage }); } } }

#diagram { height: 900px; }