Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Free Trial Buy
    Your search did not match any results.
    Diagram

    Templates

    The Diagram widget provides the following options to create custom shape templates.

    • The customShapeTemplate option defines a common template for all shapes in the widget.
    • The template option defines a template for an individual shape.

    Template content must be presented as SVG elements.

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

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    ASP.NET Core

    ASP.NET MVC

    @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) .CloseOnOutsideClick(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 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; }