Templates
The OrgChart uses Kendo UI templates to provide full control over the way nodes are rendered.
For more information on the capabilities and syntax of the templates, refer to this documentation article. For a runnable example, refer to the demo on customizing the templates in the OrgChart.
Template
You can define a template to customize the node appearance.
<div id="orgchart"></div>
<script>
$("#orgchart").kendoOrgChart({
template: "<div>Name: <strong> #: name # </strong> - Position: <strong> #: title # </strong></div>",
dataSource: [
{ id: 1, name: "Jane", title: "Manager"},
{ id: 2, name: "John", title: "Lead", parentId: 1 },
{ id: 3, name: "Jill", title: "Worker", parentId: 2 },
{ id: 4, name: "James", title: "Worker", parentId: 2 },
]
});
</script>
Group Header Template
The groupHeaderTemplate manages the way the labels in a grouped OrgChart are displayed.
<div id="orgchart"></div>
<script>
$("#orgchart").kendoOrgChart({
groupField: "title",
groupHeaderTemplate: "<i> #: field #</i>:<strong>#: value # </strong>",
dataSource: [
{ id: 1, name: "Jane", title: "Manager"},
{ id: 2, name: "John", title: "Lead", parentId: 1 },
{ id: 3, name: "Jill", title: "Worker", parentId: 2 },
{ id: 4, name: "James", title: "Worker", parentId: 2 },
]
});
</script>