New to Telerik UI for ASP.NET Core? Download free 30-day trial

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>

See Also

In this article