Templates
The Telerik UI for ASP.NET MVC 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.
@(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"));
})
)
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.
@(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"));
})
)