Diagram - Templates

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

The CustomShapeTemplate method defines a common template for all shapes in the component.
The Template method defines a template for an individual shape.

Template content must be presented as SVG elements.

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

Fluent

Generic

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 IEnumerable<DevExtreme.NETCore.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( $("Full Name: " + currentEmployee.FullName + ""), $("Title: " + currentEmployee.Title + ""), $("City: " + currentEmployee.City + ""), $("State: " + currentEmployee.State + ""), $("Email: " + currentEmployee.Email + ""), $("Skype: " + currentEmployee.Skype + ""), $("Mobile Phone: " + currentEmployee.MobilePhone + "") ) }); popup.show(); } </script>

using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; namespace DevExtreme.NETCore.Demos.Controllers { public class DiagramController : Controller { public IActionResult 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; }