filter Array|Object

The filters which are applied over the data items. It applies the filter to all loaded nodes and creates views from the nodes that match the filter and their parent nodes up to the root of the hierarchy. Currently, nodes that are not loaded are not filtered. By default, no filter is applied.

The data source filters the data items client-side unless the serverFiltering option is set to true.

Example - set a single filter

<script>
    var dataSource = new kendo.data.HierarchicalDataSource({
        filter:{ field: "name", operator: "startswith", value: "John" },
        change: function(e) {
             for (var i = 0; i < e.items.length; i++) {
                e.items[i].load();
             }
        },
        data: [
        { name: "Jane Doe", items: [
            { name: "Jane Doe" },
            { name: "John Doe" }
        ] },
        { name: "John Doe" }
        ]
    });

    dataSource.fetch();
    var view = dataSource.view();

/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(view.length);// displays 2
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(view[0].name); // displays "Jane Doe"
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(view[0].children.view().length); // displays 1
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(view[0].children.view()[0].name); // displays "John Doe"
</script>

Example - set the filter as a conjunction (and)

<script>
    var dataSource = new kendo.data.HierarchicalDataSource({
        filter:[{ field: "name", operator: "startswith", value: "John" },
            { field: "name", operator: "contains", value: "Snow" }],
        change: function(e) {
             for (var i = 0; i < e.items.length; i++) {
                e.items[i].load();
             }
        },
        data: [
        { name: "Jane Doe", items: [
            { name: "Jane Doe" },
            { name: "John Snow" },
            { name: "John Doe" }
        ] },
        { name: "John Snow" }
        ]
    });

    dataSource.fetch();
    var view = dataSource.view();

/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(view.length);// displays 2
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(view[0].name); // displays "Jane Doe"
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(view[0].children.view().length); // displays 1
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(view[0].children.view()[0].name); // displays "John Snow"
</script>

Example - set the filter as a disjunction (or)

<script>
    var dataSource = new kendo.data.HierarchicalDataSource({
          filter: {
            logic: "or",
            filters: [
              { field: "username", operator: "contains", value: "Snow" },
              { field: "name", operator: "contains", value: "John" }
            ]
          },
        change: function(e) {
             for (var i = 0; i < e.items.length; i++) {
                e.items[i].load();
             }
        },
        data: [
        { name: "Jane Doe", items: [
            { username: "Jane Doe" },
            { username: "John Snow" },
            { username: "John Doe" }
        ] },
        { name: "John Snow" }
        ]
    });

    dataSource.fetch();
    var view = dataSource.view();

/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(view.length);// displays 2
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(view[0].name); // displays "Jane Doe"
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(view[0].children.view().length); // displays 1
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(view[0].children.view()[0].username); // displays "John Snow"
</script>