All docs
V20.2
21.1 (EAP/Beta)
20.2
20.1
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.CustomShapeCreateTemplate Event

Allows you to create a template for custom shapes.

Declaration

CustomShapeCreateTemplate: ASPxClientEvent<ASPxClientDiagramCustomShapeCreateTemplateEventHandler<ASPxClientDiagram>>

Event Data

The CustomShapeCreateTemplate 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 CustomShapeCreateTemplate event to specify a template for custom shapes. The item event parameter gets the currently processed item. Add the template content (SVG elements) to the container property.

<script>
    function onCustomShapeCreateTemplate(s, e) {
        var department = getDepartment(e.item.key);
        var svgNS = "http://www.w3.org/2000/svg"
        var svgEl = document.createElementNS(svgNS, "svg");
        svgEl.setAttribute("class", "template");
        e.container.appendChild(svgEl);
        var textEl = document.createElementNS(svgNS, "text");
        textEl.setAttribute("class", "template-name");
        textEl.setAttribute("x", "50%");
        textEl.setAttribute("y", "35%");
        textEl.textContent = department.DepartmentName;
        svgEl.appendChild(textEl);
        var btnEl = document.createElementNS(svgNS, "text");
        btnEl.setAttribute("class", "template-button");
        btnEl.setAttribute("x", "50%");
        btnEl.setAttribute("y", "75%");
        btnEl.textContent = "Show Details";
        btnEl.onclick = function() { showInfo(department); };
        svgEl.appendChild(btnEl);
    }
</script>

<dx:ASPxDiagram ID="Diagram" ClientInstanceName="diagram" runat="server" Width="100%" Height="600px" 
    NodeDataSourceID="DepartmentDemoDataSource" OnNodeDataBound="Diagram_NodeDataBound">
    <Mappings>
        <Node Key="ID" Text="" ParentKey="ParentID" />
    </Mappings>
    <CustomShapes>
        <dx:DiagramCustomShape Type="department" BaseType="Rectangle" DefaultWidth = 2 
            DefaultHeight = 0.75 AllowEditText = false AllowResize = false />
    </CustomShapes>
    <ClientSideEvents CustomShapeCreateTemplate="onCustomShapeCreateTemplate" />
</dx:ASPxDiagram>
protected void Diagram_NodeDataBound(object sender, DiagramNodeEventArgs e) {
    e.Node.Type = "department";
}
NOTE

If the Text property is specified, template content may overlap with text from the data source.

Since the Text property has the default value "Text", the control will obtain node texts from the data source’s "Text" field. To prevent his behavior, set the property to an empty string.

<Node Text="" .../>

Handle the CustomShapeCreateToolboxTemplate event to create a template for custom shapes in the toolbox.

Run Demo: Custom Shapes

See Also