Data Visualization ▸ 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.

@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;
}