Your search did not match any results.

Diagram - 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.

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