Filter Only Leaf Nodes In DropDownTree
Environment
Product | Progress® Kendo UI® DropDownTree for jQuery |
Description
How can I perform filtering only on the leaf nodes of Kendo DropDownTree?
Solution
- Subscribe to the
filtering
event of the DropDownTree. - Check the applied filter.
- Prevent the default behavior.
- Filter only the leaf ndoes from the dataSource
<div id="cap-view" class="demo-section k-content">
<h4>Select one or more items</h4>
<input id="dropdowntree" style="width: 100%;" />
</div>
<style>
.highlighted-item {
background-color: yellowgreen;
}
</style>
<script>
$(document).ready(function () {
// create kendoDropDownTree from input HTML element
$("#dropdowntree").kendoDropDownTree({
placeholder: "Select ...",
filter: "contains",
filtering: function (e) {
var filter = e.filter;
e.preventDefault()
e.sender._filtering = true;
e.sender.dataSource.filter([
{ field: "hasChildren", operator: "eq", value: false },
filter
]);
},
dataSource: [
{
text: "USA", expanded: true, items: [
{
text: "Alabama", items: [
{ text: "Birmingham" },
{ text: "Alabama Child"}
]
}
]
},
{
text: "UK", items: [
{ text: "Birmingham" }
]
}
]
});
});
</script>