Templates

The Telerik UI for ASP.NET Core TreeView provides options to customize the appearance of its hierarchical data and the associated checkbox for a given node.

Node Template

To customize the appearance of the nodes, use the Template() configuration method. The available template field for you to use is item, which represents the data item of the current node.

The following example demonstrates how to display custom text for a given TreeView node.

Razor

    @(Html.Kendo().TreeView()
        .Name("treeview")
        .Template("(#= item.id #) #= item.text # ")  
        .CheckboxTemplate("<input type='checkbox' name='checkedFiles[#= item.id #]' value='true' />")
        .DataSource(source =>
        {
            source.Read(read => read.Action("Read_TemplateData", "TreeView"));
        })    
    )

Razor

    <kendo-treeview template="(#= item.id #) #= item.text #" name="treeview">
        <hierarchical-datasource>
            <schema>
                <hierarchical-model id="id"></hierarchical-model>
            </schema>
            <transport>
                <read url="@Url.Action("Read_TemplateData", "TreeView")" />
            </transport>
        </hierarchical-datasource>
    </kendo-treeview>

CheckBox Template

To customize the appearance of the TreeView checkboxes, use the CheckboxTemplate() configuration method.

The component supports the following template fields:

• item—The data item of the given node.
• treeview—The TreeView options.

The following example demonstrates how to display a custom checkbox for each of the TreeView nodes.

Razor

    @(Html.Kendo().TreeView()
        .Name("treeview")
        .CheckboxTemplate("<input type='checkbox' class='k-checkbox k-checkbox-md' name='checkedFiles[#= item.id #]' value='true' />")
        .DataSource(source =>
        {
            source.Read(read => read.Action("Read_TemplateData", "TreeView"));
        })    
    )

Razor

    <kendo-treeview  name="treeview">
        <checkboxes template="<input type='checkbox' class='k-checkbox k-checkbox-md' name='checkedFiles[#= item.id #]' value='true' />" />
        <hierarchical-datasource>
            <schema>
                <hierarchical-model id="id"></hierarchical-model>
            </schema>
            <transport>
                <read url="@Url.Action("Read_TemplateData", "TreeView")" />
            </transport>
        </hierarchical-datasource>
    </kendo-treeview>

See Also

• Templates of the Telerik UI for ASP.NET Core TreeView (Demo)
• Server-Side API Reference of the TreeView for Telerik UI for ASP.NET Core
• Client-Side API Reference of the TreeView for Telerik UI for ASP.NET Core