Preventing Selection of First Level Options in DropDownTree
Environment
Product | Version |
---|---|
DropDownTree for Progress® Kendo UI® | 2023.3.1114 |
Description
I want to prevent the user from selecting the first level options in a DropDownTree with checkboxes. How can I achieve this?
Solution
To prevent the selection of first level options in a DropDownTree with checkboxes, follow these steps:
- Add a select event handler to the DropDownTree. In the event handler, check the number of
ul
parents of the selected node. If there is only oneul
element, prevent the selection of the item.
$("#dropdowntree").kendoDropDownTree({
select: function(e) {
var ulParents = $(e.node).parents("ul").length;
if (ulParents <= 1) {
e.preventDefault();
}
},
// other configuration options
});
- Define the checkboxes.template using a function. In the function, check if the item is on the root level. If it is, hide the checkbox; otherwise, define the checkbox element according to your preference.
$("#dropdowntree").kendoDropDownTree({
checkboxes: {
template: function(e) {
if (e.group.firstLevel == true) {
return "";
} else {
return "<input class='k-checkbox-md k-rounded-md k-checkbox' type='checkbox' name='" + kendo.guid() + "' value='true' aria-hidden='true' tabindex='-1' />";
}
}
},
// other configuration options
});
Please refer to the Progress Kendo UI Dojo for a live example demonstrating the above solution.