Filtering

The Kendo UI Grid wrapper for Vue provides options for filtering the data it displays.

To configure the filtering functionality of the native Vue Grid by Kendo UI, refer to the native Vue Grid by Kendo UI documentation.

Filter Row

You can enable the filter row in the header of the Grid by setting filterable-mode property to row. As a result and based on the data type of the underlying column data, the Grid renders textboxes for string values or numeric inputs, or date pickers in the column headers for data filtering.

To specify the default filter operator which will be applied when the user enters a value in the filter textbox and presses Enter or Tab on the keyboard, set the filterable-cell attribute of the corresponding column to operator.

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource1"
                      :type="'odata'"
                      :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders'"
                      :page-size='20'
                      :server-paging="true"
                      :server-filtering="true"
                      :schema-model-fields="dsSchemaFields">
    </kendo-datasource>

    <kendo-grid :data-source-ref="'datasource1'"
                :pageable="true"
                :filterable-mode="'row'">
        <kendo-grid-column :field="'OrderID'"
                           :width="180"
                           :filterable-cell-show-operators="false"></kendo-grid-column>
        <kendo-grid-column :field="'ShipName'"
                           :title="'Ship Name'"
                           :width="240"
                           :filterable-cell-operator="'contains'"
                           :filterable-cell-suggestion-operator="'contains'"></kendo-grid-column>
        <kendo-grid-column :field="'Freight'"
                           :width="180"
                           :filterable-cell-operator="'gte'"></kendo-grid-column>
        <kendo-grid-column :field="'OrderDate'"
                           :title="'Order Date'"
                           :format="'{0:MM/dd/yyyy}'"
                           :width="180"></kendo-grid-column>
    </kendo-grid>
</div>
Vue.use(DataSourceInstaller);
Vue.use(GridInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            dsSchemaFields: {
                OrderID: { type: "number" },
                Freight: { type: "number" },
                ShipName: { type: "string" },
                OrderDate: { type: "date" },
                ShipCity: { type: "string" }
            }
        }
    }
})

Filter Checkboxes

You can enable the checkbox filtering in the filter menu by setting filterable-multi to true for the desired Kendo UI Data Grid wrapper for Vue columns.

You can also combine the checkbox filter with the itemTemplate definition as demonstrated with the Country column in the second Grid in the following example. In this way, you can customize the items with checkboxes which will be visualized and available for selection to the end user.

The following example demonstrates how to set the client operations.

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource1"
                      :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Products'"
                      :transport-read-data-type="'jsonp'"
                      :transport-update-url="'https://demos.telerik.com/kendo-ui/service/Products/Update'"
                      :transport-update-data-type="'jsonp'"
                      :transport-destroy-url="'https://demos.telerik.com/kendo-ui/service/Products/Destroy'"
                      :transport-destroy-data-type="'jsonp'"
                      :transport-create-url="'https://demos.telerik.com/kendo-ui/service/Products/Create'"
                      :transport-create-data-type="'jsonp'"
                      :transport-parameter-map="parameterMap"
                      :schema-model-id="'ProductID'"
                      :schema-model-fields="schemaModelFields"
                      :batch='true'
                      :page-size='20'>
    </kendo-datasource>

    <kendo-grid :height="600"
                :data-source-ref="'datasource1'"
                :filterable="true"
                :pageable="true"
                :editable="true"
                :toolbar="['create', 'save', 'cancel']">
        <kendo-grid-column :field="'ProductName'"
                           :filterable-multi="true"
                           :filterable-search="true"></kendo-grid-column>
        <kendo-grid-column :field="'UnitPrice'"
                           :title="'Unit Price'"
                           :width="120"
                           :format="'{0:c}'"
                           :filterable-multi="true"></kendo-grid-column>
        <kendo-grid-column :field="'UnitsInStock'"
                           :title="'Units In Stock'"
                           :width="120"
                           :filterable-multi="true"></kendo-grid-column>
        <kendo-grid-column :field="'Discontinued'"
                           :width="120"
                           :filterable-multi="true"
                           :filterable-data-source="discontinuedDs"></kendo-grid-column>
        <kendo-grid-column :command="['destroy']"
                           :title="'&nbsp;'"
                           :width="100"></kendo-grid-column>
    </kendo-grid>
</div>
Vue.use(GridInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            schemaModelFields: {
                ProductID: { editable: false, nullable: true },
                ProductName: { validation: { required: true } },
                UnitPrice: { type: 'number', validation: { required: true, min: 1 } },
                Discontinued: { type: 'boolean' },
                UnitsInStock: { type: 'number', validation: { min: 0, required: true } }
            },
            discontinuedDs: [
                { Discontinued: true },
                { Discontinued: false }
            ]
        }
    },
    methods: {
        parameterMap: function(options, operation) {
            if (operation !== 'read' && options.models) {
                return { models: kendo.stringify(options.models) }
            }
        }
    }
})

The following example demonstrates how to set the server operations.

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource1"
                      :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees'"
                      :type="'odata'"
                      :page-size='20'
                      :server-paging="true"
                      :server-sorting="true"
                      :server-filtering="true">
    </kendo-datasource>

    <kendo-grid :height="600"
                :data-source-ref="'datasource1'"
                :filterable="true"
                :pageable="true">
        <kendo-grid-column :field="'FirstName'"
                           :title="'First Name'"
                           :filterable-multi="true"
                           :filterable-data-source-transport-read-url="'https://demos.telerik.com/kendo-ui/service/Employees/Unique'"
                           :filterable-data-source-transport-read-data-type="'jsonp'"
                           :filterable-data-source-transport-read-data-field="'FirstName'"
                           :width="180"></kendo-grid-column>
        <kendo-grid-column :field="'LastName'"
                           :title="'Last Name'"
                           :filterable-multi="true"
                           :filterable-data-source-transport-read-url="'https://demos.telerik.com/kendo-ui/service/Employees/Unique'"
                           :filterable-data-source-transport-read-data-type="'jsonp'"
                           :filterable-data-source-transport-read-data-field="'LastName'"
                           :width="180"></kendo-grid-column>
        <kendo-grid-column :field="'Country'"
                           :filterable-multi="true"
                           :filterable-data-source-transport-read-url="'https://demos.telerik.com/kendo-ui/service/Employees/Unique'"
                           :filterable-data-source-transport-read-data-type="'jsonp'"
                           :filterable-data-source-transport-read-data-field="'Country'"
                           :filterable-item-template="countryFilterTemplate"
                           :width="180"></kendo-grid-column>
        <kendo-grid-column :field="'City'"
                           :filterable-multi="true"
                           :filterable-data-source="cityDataSource"
                           :filterable-check-all="false"
                           :width="180"></kendo-grid-column>
        <kendo-grid-column :field="'Title'"
                           :filterable-multi="true"
                           :filterable-data-source-transport-read-url="'https://demos.telerik.com/kendo-ui/service/Employees/Unique'"
                           :filterable-data-source-transport-read-data-type="'jsonp'"
                           :filterable-data-source-transport-read-data-field="'Title'"
                           :width="100"></kendo-grid-column>
    </kendo-grid>
</div>
Vue.use(GridInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            cityDataSource: [
                { City: "Seattle" },
                { City: "Tacoma" },
                { City: "Kirkland" },
                { City: "Redmond" },
                { City: "London" }
            ]
        }
    },
    methods: {
        countryFilterTemplate: function(e) {
            if (e.field == "all") {
                //handle the check-all checkbox template
                return "<div><label><strong><input type='checkbox' />#= all#</strong></label></div>";
            } else {
                //handle the other checkboxes
                return "<span><label><input type='checkbox' name='" + e.field + "' value='#=Country#'/><span>#= Country #</span></label></span>"
            }
        }
    }
})

Filter Menu Customization

The following example demonstrates how to apply common settings to the filter menu of the Kendo UI Grid wrapper for Vue and customize its UI per column by using the exposed API for the column menu.

The implementation:

  • Specifies a single-filter criterion by using the filterable-extra=false setting.
  • Limits the filter operators for string columns to starts with, equal, and not equal.
  • Defines the UI of the built-in date picker to filter the DateTime column of the Grid.
  • Instantiates the Kendo UI DropDownList for the Category column. To create the drop-down filter, assign a JavaScript function to the filterable->ui property of the corresponding column.
<div id="vueapp" class="vue-app">
    <kendo-grid :data-source="localDataSource"
                :filterable-extra="false"
                :filterable-operators-string-eq="'Is equal to'"
        :filterable-operators-string-neq="'Not equal to'"
        :filterable-operators-string-startswith="'starts with'" >
        <kendo-grid-column :field="'ProductName'"
                           :filterable="false"
                           :width="180"></kendo-grid-column>
        <kendo-grid-column :field="'UnitPrice'"
                           :title="'Unit Price'"
                           :width="120"
                           :format="'{0:c}'"></kendo-grid-column>
        <kendo-grid-column :field="'Category'"
                           :width="180"
                           :filterable-ui="categoryFilter"></kendo-grid-column>
        <kendo-grid-column :field="'DeliveryDate'"
                           :title="'Delivery Date'"
                           :format="'{0:MM/dd/yyyy}'"
                           :width="180"
                           :filterable-ui="'datepicker'"></kendo-grid-column>
    </kendo-grid>
</div>
Vue.use(GridInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            categories: [
                "Beverages",
                "Condiments",
                "Confections",
                "Dairy Products",
                "Grains/Cereals"
            ],
            localDataSource: {
                schema: {
                    model: {
                        id: "ProductID",
                        fields: {
                            ProductID: { editable: false, nullable: true },
                            ProductName: { type: 'string' },
                            UnitPrice: { type: 'number' },
                            Category: { type: "string" },
                            DeliveryDate: { type: 'date' }
                        }
                    }
                },
                data: [{
                    "ProductID": 1,
                    "ProductName": "Chai",
                    "UnitPrice": 18,
                    "Category": "Beverages",
                    "DeliveryDate": new Date(2018, 8, 24)
                },
                {
                    "ProductID": 2,
                    "ProductName": "Chef Anton",
                    "UnitPrice": 22,
                    "Category": "Condiments",
                    "DeliveryDate": new Date(2018, 3, 4)
                },
                {
                    "ProductID": 3,
                    "ProductName": "Chef Gumbo Mix",
                    "UnitPrice": 21.35,
                    "Category": "Condiments",
                    "DeliveryDate": new Date(2018, 10, 11)
                },
                {
                    "ProductID": 4,
                    "ProductName": "Boysenberry Spread",
                    "UnitPrice": 25,
                    "Category": "Grains/Cereals",
                    "DeliveryDate": new Date(2018, 11, 10)
                }]
            }
        }
    },
    methods: {
        categoryFilter: function(element) {
            element.kendoDropDownList({
                dataSource: this.categories,
                optionLabel: "--Select Value--"
            });
        }
    }
})

In this article