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.