Data Visualization ▸ Templates

The Diagram component provides the following properties to create custom shape templates.

The customShapeTemplate property defines a common template for all shapes in the component.
The template property defines a template for an individual shape.

Template content must be presented as SVG elements.

In this demo, the customShapeTemplate property adds the 'Show Details' link to a shape. When clicked, it displays a popup window that contains additional information about an employee.

@model IEnumerable<DevExtreme.MVC.Demos.Models.OrgItemPlain>

@(Html.DevExtreme().Diagram()
    .ID("diagram")
    .ReadOnly(true)
    .CustomShapes(cs => {
        foreach(var employee in Model) {
            cs.Add()
                .Type("employee" + employee.ID)
                .BaseType("rectangle")
                .DefaultWidth(1.5)
                .DefaultHeight(1)
                .AllowEditText(false)
                .AllowResize(false);
        }
    })
    .CustomShapeTemplate(@<text>
        <svg class="template">
            <text class="template-name" x="50%" y="20%"><%- dataItem.FullName %></text>
            <text class="template-title" x="50%" y="45%"><%- dataItem.Title %></text>
            <text class="template-button" x="50%" y="85%" onclick="showInfo(<%- JSON.stringify(dataItem) %>)">Show Details</text>
        </svg>
    </text>)
    .Nodes(ns => ns
        .DataSource(d => d
            .Array()
            .Key("ID")
            .Data(Model)
        )
        .KeyExpr("ID")
        .TypeExpr(new JS("itemTypeExpr"))
        .ParentKeyExpr("HeadID")
        .AutoLayout(al => al
            .Type(DiagramDataLayoutType.Tree)
        )
    )
)

@(Html.DevExtreme().Popup()
    .ID("popup")
    .Width(300)
    .Height(280)
    .ShowTitle(true)
    .Title("Information")
    .Visible(false)
    .DragEnabled(false)
    .HideOnOutsideClick(true)
)

<script type="text/javascript">
    var currentEmployee = {};

    function itemTypeExpr(obj) {
        return "employee" + obj.ID;
    }

    function showInfo(employee) {
        currentEmployee = employee;

        var popup = $("#popup").dxPopup("instance");
        popup.option("contentTemplate", function() {
            return $("<div />").append(
                $("<p>Full Name: <b>" + currentEmployee.FullName + "</b></p>"),
                $("<p>Title: <b>" + currentEmployee.Title + "</b></p>"),
                $("<p>City: <b>" + currentEmployee.City + "</b></p>"),
                $("<p>State: <b>" + currentEmployee.State + "</b></p>"),
                $("<p>Email: <b>" + currentEmployee.Email + "</b></p>"),
                $("<p>Skype: <b>" + currentEmployee.Skype + "</b></p>"),
                $("<p>Mobile Phone: <b>" + currentEmployee.MobilePhone + "</b></p>")
            )
        });
        popup.show();
    }
</script>

using System.Web.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;

namespace DevExtreme.MVC.Demos.Controllers {
    public class DiagramController : Controller {

        public ActionResult CustomShapesWithTemplates() {
            return View(SampleData.OrgItemsPlain);
        }

    }
}

#diagram {
    height: 725px;
}

#diagram .template .template-name {
    font-weight: bold;
    text-decoration: underline;
}

#diagram .template .template-title {
    font-style: italic;
}

#diagram .template .template-button {
    cursor: pointer;
    font-size: 8pt;
    fill: navy;
}

#diagram .template .template-button:hover {
    text-decoration: underline;
}

.dx-popup-content p {
    margin: 0 0 10px;
}