ASPxClientDiagram.CustomShapeCreateToolboxTemplate Event

Allows you to create a template for custom shapes in the toolbox.

Declaration

CustomShapeCreateToolboxTemplate: ASPxClientEvent<ASPxClientDiagramCustomShapeCreateTemplateEventHandler<ASPxClientDiagram>>

Event Data

The CustomShapeCreateToolboxTemplate event's data class is ASPxClientDiagramCustomShapeCreateTemplateEventArgs. The following properties provide information specific to this event:

Property	Description
container	Returns the template’s container.
item	Gets the currently processed diagram item.

Remarks

Use the CustomShapeCreateToolboxTemplate event to specify a template for custom shapes. The event argument’s item property provides access to the processed item. Add the template content (as SVG elements) to the container property.

ASPX

<script>
  function CustomShapeCreateToolboxTemplate(s, e) {
    var svgNS = "http://www.w3.org/2000/svg"
    var svgEl = document.createElementNS(svgNS, "svg");
    svgEl.setAttribute("class", "template");
    e.container.appendChild(svgEl);
    var textEl1 = document.createElementNS(svgNS, "text");
    textEl1.setAttribute("class", "template-name");
    textEl1.setAttribute("x", "50%");
    textEl1.setAttribute("y", "40%");
    textEl1.textContent = "New";
    var textEl2 = document.createElementNS(svgNS, "text");
    textEl2.setAttribute("class", "template-name");
    textEl2.setAttribute("x", "50%");
    textEl2.setAttribute("y", "70%");
    textEl2.textContent = "Employee";
    svgEl.appendChild(textEl1);
    svgEl.appendChild(textEl2);
  }
</script>

<dx:ASPxDiagram ID="Diagram" runat="server" Width="100%" Height="600px">
<SettingsToolbox ShapeIconsPerRow="1" ShowSearch="false">
  <Groups>
    <dx:DiagramToolboxGroup Category="Custom" CustomCategoryName="Employee" Title="Employee"/>
  </Groups>
</SettingsToolbox>
<ClientSideEvents CustomShapeCreateToolboxTemplate="CustomShapeCreateToolboxTemplate" />
<CustomShapes>
    <dx:DiagramCustomShape CategoryName="Employee" Type="employee" BaseType="Rectangle" ToolboxWidthToHeightRatio="2"/>
  ...
</dx:ASPxDiagram>