ASPxClientDiagramCustomShapeCreateTemplateEventArgs.container Property
Returns the template’s container.
Declaration
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.
<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>
See Also