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 not loaded nodes 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();

    console.log(view.length);// displays 2
    console.log(view[0].name); // displays "Jane Doe"
    console.log(view[0].children.view().length); // displays 1
    console.log(view[0].children.view()[0].name); // displays "John Doe"
</script>

Example - set filter as 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();

    console.log(view.length);// displays 2
    console.log(view[0].name); // displays "Jane Doe"
    console.log(view[0].children.view().length); // displays 1
    console.log(view[0].children.view()[0].name); // displays "John Snow"
</script>

Example - set filter as 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();

    console.log(view.length);// displays 2
    console.log(view[0].name); // displays "Jane Doe"
    console.log(view[0].children.view().length); // displays 1
    console.log(view[0].children.view()[0].username); // displays "John Snow"
</script>
In this article
Not finding the help you need?