All docs
V20.2
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

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.

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

Diagram - Toolbox Template

See Also