Filtering

The built-in filtering functionality enables the user to filter the displayed DropDownTree items by their text value.

By default, filtering is disabled and can be performed over string values only—that is, either the widget data has to be an array of strings or configured in the data-text-field option over the field.

The DropDownTree supports the following filter values:

  • startswith
  • endswith
  • contains

The following example demonstrates how to enable the startsWith filtering within the DropDownTree.

<div id="vueapp" class="vue-app">
    <kendo-dropdowntree :data-source="localDataSource"
                        :filter="'startswith'"
                        :placeholder="'Select ...'"
                        style="width: 300px;">
    </kendo-dropdowntree>
</div>
Vue.use(DropDownTreeInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            localDataSource: new kendo.data.HierarchicalDataSource({
                data: [{
                    text: 'Furniture',
                    items: [
                        { text: 'Tables & Chairs' },
                        { text: 'Sofas' },
                        { text: 'Occasional Furniture' }
                    ]
                },{
                    text: 'Decor',
                    items: [
                        { text: 'Bed Linen' },
                        { text: 'Curtains & Blinds' },
                        { text: 'Carpets' }
                    ]
                }]
            })
        }
    }
})

In this article