Filter Only Leaf Nodes In DropDownTree

Environment

Product Progress Kendo UI DropDownTree

Description

How can I perform filtering only on the leaf nodes of Kendo DropDownTree?

Solution

  1. Subscribe to the filtering event of the DropDownTree.
  2. Check the applied filter.
  3. Prevent the default behavior.
  4. 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>

See Also

In this article
Not finding the help you need? Improve this article