Vue Diagram - Templates
The Diagram UI component allows you to create templates for shapes and their presentation in the toolbox.
IMPORTANT
Template content must be presented as SVG elements.
Shape Template
Use the following properties to create a shape template:
- The customShapeTemplate property defines a common template for all shapes in the UI component.
- The template property defines a template for an individual shape.
jQuery
index.js
$(function() { var diagram = $("#diagram").dxDiagram({ customShapeTemplate: function(item, $container) { var employee = item.dataItem; var $content = $("<svg class='template'>" + "<text class='template-name' x='50%' y='20%'>" + (employee ? employee.Full_Name : "Employee's Name") + "</text>" + "<text class='template-title' x='50%' y='45%'>" + (employee ? employee.Title : "Employee's Title") + "</text>" + "<text class='template-button' id='employee-edit' x='40%' y='85%'>Edit</text>" + "<text class='template-button' id='employee-delete' x='62%' y='85%'>Delete</text>" + "</svg >"); $container.append($content); $content.find("#employee-edit").click(function() { editEmployee(employee); }); $content.find("#employee-delete").click(function() { deleteEmployee(employee); }); }, ...
Angular
app.component.html
<dx-diagram id="diagram" #diagram customShapeTemplate="customShapeTemplate"> <svg *dxTemplate="let item of 'customShapeTemplate'" class="template"> <text class="template-name" x="50%" y="20%">{{item.dataItem ? item.dataItem.Full_Name : "Employee's Name"}}</text> <text class="template-title" x="50%" y="45%">{{item.dataItem ? item.dataItem.Title : "Employee's Title"}}</text> <text class="template-button" x="40%" y="85%" (click)="editEmployee(item.dataItem)">Edit</text> <text class="template-button" x="62%" y="85%" (click)="deleteEmployee(item.dataItem)">Delete</text> </svg> ...
Vue
App.vue
CustomShapeTemplate.vue
<DxDiagram id="diagram" ref="diagram" custom-shape-template="CustomShapeTemplate" > <template #CustomShapeTemplate="{ data }"> <CustomShapeTemplate :employee="data.dataItem" :edit-employee="editEmployee" :delete-employee="deleteEmployee" /> </template> ...
<template> <svg class="template"> <text class="template-name" x="50%" y="20%" > {{ employeeName }} </text> <text class="template-title" x="50%" y="45%" > {{ employeeTitle }} </text> <text class="template-button" x="40%" y="85%" @click="editEmployeeFunc" > Edit </text> <text class="template-button" x="62%" y="85%" @click="deleteEmployeeFunc" > Delete </text> </svg> </template> ...
React
App.js
CustomShapeTemplate.js
import Diagram, { CustomShape, ContextToolbox, PropertiesPanel, Group, Tab, Toolbox, Nodes, AutoLayout } from 'devextreme-react/diagram'; import CustomShapeTemplate from './CustomShapeTemplate.js'; class App extends React.Component { constructor(props) { this.diagramRef = React.createRef(); this.customShapeTemplate = this.customShapeTemplate.bind(this); ... } render() { return ( <div id="container"> <Diagram id="diagram" ref={this.diagramRef} customShapeRender={this.customShapeTemplate}> ...
export default function CustomShapeTemplate(employee, editEmployee, deleteEmployee) { var employeeName = employee ? employee.Full_Name : 'Employee\'s Name'; var employeeTitle = employee ? employee.Title : 'Employee\'s Title'; return ( <svg className="template"> <text className="template-name" x="50%" y="20%">{employeeName}</text> <text className="template-title" x="50%" y="45%">{employeeTitle}</text> <text className="template-button" x="40%" y="85%" onClick={editEmployee}>Edit</text> <text className="template-button" x="62%" y="85%" onClick={deleteEmployee}>Delete</text> </svg> ); }
ASP.NET Core Controls
CustomShapesWithTemplatesWithEditing.cshtml
@(Html.DevExtreme().Diagram() .ID("diagram") .CustomShapeTemplate(@<text> <svg class="template"> <text class="template-name" x="50%" y="20%"><%- dataItem ? dataItem.FullName : "Employee's Name" %></text> <text class="template-title" x="50%" y="45%"><%- dataItem ? dataItem.Title : "Employee's Title" %></text> <text class="template-button" x="40%" y="85%" onclick="editEmployee(<%- dataItem && JSON.stringify(dataItem) %>)">Edit</text> <text class="template-button" x="62%" y="85%" onclick="deleteEmployee(<%- dataItem && JSON.stringify(dataItem) %>)">Delete</text> </svg> </text>) ...
ASP.NET MVC Controls
CustomShapesWithTemplatesWithEditing.cshtml
@(Html.DevExtreme().Diagram() .ID("diagram") .CustomShapeTemplate(@<text> <svg class="template"> <text class="template-name" x="50%" y="20%"><%- dataItem ? dataItem.FullName : "Employee's Name" %></text> <text class="template-title" x="50%" y="45%"><%- dataItem ? dataItem.Title : "Employee's Title" %></text> <text class="template-button" x="40%" y="85%" onclick="editEmployee(<%- dataItem && JSON.stringify(dataItem) %>)">Edit</text> <text class="template-button" x="62%" y="85%" onclick="deleteEmployee(<%- dataItem && JSON.stringify(dataItem) %>)">Delete</text> </svg> </text>) ...
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.