Hide Checkboxes for Root-Level TreeView Items
Environment
| Product | Progress® Kendo UI® TreeView for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I hide the checkboxes for the root level items in the Kendo UI for jQuery TreeView?
Solution
The following example demonstrates how to achieve this behavior by using the checkboxes.template configuration option.
<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true,
template:
"# if (item.level() > 0) { #" +
"<input type='checkbox' #= item.checked ? 'checked' : '' #>" +
"# } #"
},
dataSource: [
{ id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
{ id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
{ id: 3, text: "about.html", spriteCssClass: "html" },
{ id: 4, text: "index.html", spriteCssClass: "html" },
{ id: 5, text: "logo.png", spriteCssClass: "image" }
]
},
{ id: 6, text: "New Website", expanded: true, spriteCssClass: "folder", items: [
{ id: 7, text: "mockup.jpg", spriteCssClass: "image" },
{ id: 8, text: "Research.pdf", spriteCssClass: "pdf" },
] }
] },
{ id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
{ id: 10, text: "February.pdf", spriteCssClass: "pdf" },
{ id: 11, text: "March.pdf", spriteCssClass: "pdf" },
{ id: 12, text: "April.pdf", spriteCssClass: "pdf" }
] }
]
});
</script>