Your search did not match any results.

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.

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