Templates
The OrgChart provides full control over the rendering of the nodes and group headers by using Kendo UI templates.
The OrgChart supports node and group header templates.
Node Template
The node template controls the rendering of the OrgChart nodes.
The following example demonstrates how to define a node template and how to evaluate it against the data item.
.Template("<div class='custom'>" +
"<div><img src=' #: Avatar #'/></div>" +
"<span>Name: <strong> #: Name # </strong></span>" +
"<div><i> Position: #: Title # </i></div>" +
"</div>")
<kendo-orgchart name="orgchart" template-id="template">
// Ommited for brevity.
</kendo-orgchart>
<script type="text/x-kendo-template" id="template">
<div class='custom'>
<div><img src=' #: Avatar #'/></div>
<span>Name: <strong> #: Name # </strong></span>
<div><i> Position: #: Title # </i></div>
</div>
</script>
Group Header Template
The group header controls the rendering of the group headers in the OrgChart.
The following example demonstrates how to define a group header. The group field and its value are available in the template.
.GroupHeaderTemplate("<i> #: field #</i>:<strong>#: value # </strong>")
<kendo-orgchart name="orgchart" group-header-template-id="groupHeaderTemplate">
// Ommited for brevity.
</kendo-orgchart>
<script type="text/x-kendo-template" id="groupHeaderTemplate">
<i> #: field #</i>:<strong>#: value # </strong>
</script>