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