New to Kendo UI for jQuery? Download free 30-day trial

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>

See Also

In this article