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.

ASPX

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

C#

protected void Diagram_NodeDataBound(object sender, DiagramNodeEventArgs e) {
    e.Node.Type = "department";
}

VB.NET

Protected Sub Diagram_NodeDataBound(ByVal sender As Object, ByVal e As DiagramNodeEventArgs)
    e.Node.Type = "department"
End Sub

Set a custom shape’s AllowEditText property to false to disable shape text editing. Otherwise, users can add shape text that may overlap with template content.

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 this behavior, set the property to an empty string.

ASPX

<Node Text="" .../>

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

Run Demo: Custom Shapes