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.
@(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"));
})
)
<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.
@(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"));
})
)
<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>