ASPxClientDiagramCustomShapeCreateTemplateEventArgs.container Property

Returns the template’s container.

Declaration

TypeScript

container: any

Property Value

Type	Description
any	A container for the template.

Remarks

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>

Run Demo: Templates