New to Kendo UI for jQuery? Start a free 30-day trial
Applying k-selected Class to Checked Items in Kendo UI for jQuery DropDownTree
Environment
Product | Kendo UI for jQuery DropDownTree |
Version | 2025.2.250 |
Description
When using the Kendo UI for jQuery DropDownTree, enabling checkboxes may cause visual inconsistencies. Specifically, when a checkbox is checked, the aria-checked
attribute updates correctly, but the .k-selected
class does not apply to the corresponding item. Consequently, the item does not visually appear as selected, even though its checkbox is checked.
This knowledge base article also answers the following questions:
- How to make items visually selected when checkboxes are checked in Kendo UI for jQuery DropDownTree?
Solution
To ensure that the .k-selected
class is applied to items when their checkboxes are checked, you can manually add or remove the class based on the checkbox state.
Steps:
- Attach a
change
event listener to the checkboxes within the DropDownTree. - Use the event to determine the state of the checkbox (
checked
orunchecked
). - Apply or remove the
.k-selected
class to the corresponding item based on the checkbox's state.
JavaScript Example
javascript
$(".k-treeview").on("change", ".k-checkbox", function () {
var item = $(this)
.closest(".k-treeview-item")
.find(".k-treeview-leaf");
if ($(this).is(":checked")) {
item.addClass("k-selected"); // Add the class for visual selection
} else {
item.removeClass("k-selected"); // Remove the class when unchecked
}
});
This script ensures that when a checkbox is checked, the corresponding item visually appears as selected by applying the .k-selected
class.
Example
<label for="dropdowntree">Select one or more items</label>
<input id="dropdowntree" />
<script>
$(document).ready(function () {
$("#dropdowntree").kendoDropDownTree({
placeholder: "Select ...",
checkboxes: true,
checkAll: true,
autoClose: false,
dataSource: [
{
text: "Furniture",
expanded: true,
items: [
{ text: "Tables & Chairs" },
{ text: "Sofas" },
{ text: "Occasional Furniture" },
],
},
{
text: "Decor",
items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" },
],
},
],
});
$(".k-treeview").on("change", ".k-checkbox", function () {
var item = $(this)
.closest(".k-treeview-item")
.find(".k-treeview-leaf");
if ($(this).is(":checked")) {
item.addClass("k-selected");
} else {
item.removeClass("k-selected");
}
});
});
</script>