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 a container for an instance of the template.
item	Gets the currently processed diagram item.

Remarks

Use the CustomShapeCreateTemplate event to specify a template for custom shapes. The event argument’s item property provides access to the currently processed item. Add the template content, which must be presented as 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>
    <ClientSideEvents CustomShapeCreateTemplate="onCustomShapeCreateTemplate" />
</dx:ASPxDiagram>

Online Demo

Diagram - Custom Shapes