Filtering

The DataSource accepts a list of one or more filter expressions.

You can combine them by using the and or or logical operators. For more information on the filter expression structure, refer to the documentation on the filter configuration option.

Local Filtering of Data

Local filtering is convenient for small datasets.

The following example demonstrates how to match the dataItem to the filtering criteria and log it in the console.

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="localDataSource"
                      :filter="filter"
                      :data="localData">
    </kendo-datasource>
</div>
Vue.use(DataSourceInstaller);

new Vue({
    el: '#vueapp',
    data: {
        localData: [
            { name: "Tea", category: "Beverages" },
            { name: "Coffee", category: "Beverages" },
            { name: "Ham", category: "Food" }
        ],
        filter: {
            logic: "and",
            filters: [
                { field: "name", operator: "contains", value: "Coffee" },
                { field: "category", operator: "eq", value: "Beverages" }
            ]
        }
    },
    methods: {
        logData: function() {
            var ds = this.$refs.localDataSource.kendoWidget();
            ds.fetch();
            console.log(ds.view()[0]);
        }
    },
    mounted: function() {
        this.logData();
    }
})

Server Filtering of Data

Server filtering is convenient for large datasets. To apply server filtering of data, set the schema and the filter properties.

The following example demonstrates how to filter data on the server and handle the filtered data which is logged in the console after filtering is applied. Note that the data which is returned by the transport is evaluated in the same way.

<kendo-datasource :filter="filterConfiguration"
                  :schema-data="'result'"
                  :server-filtering="true"
                  :transport-read-url="{remote service}">
</kendo-datasource>
// The JSON result from "{remote service}"
{
    result: [
        { name: "Tea", category: "Beverages" },
        { name: "Coffee", category: "Beverages" },
        { name: "Ham", category: "Food" }
    ]
}

In this article