Filtering

The native Vue Grid by Kendo UI provides diverse filtering options for displaying Grid records which meet specified criteria.

Getting Started

To enable filtering:

1. Set the filterable and filter options of the Grid.
2. Handle the filterchange event of the Grid, and filter the data manually by applying the filter from the argument of the event.

Filter Row

By default, when filtering is enabled, the Grid renders a filter row in its column headers. Based on the type of data the columns contain, the filter row displays textboxes in each column header where the user can filter string, numeric, or date inputs.

Custom Filter Cell

To render a custom filter cell in the Grid, use templates. To display a filter template in the header of the Grid columns, use any of the following approaches:

• Using slots, as demonstrated by the filterSlotTemplate in the following example.
• Using the render function, as demonstrated by the filterRender function in the following example.

In the above example the custom numeric filter could also be defined as a local component instance in the following way:

Copy Codevar customnumeric = {
    template: `<div>
                <input ref='input' class='k-input' type='number' :value='value' @input='change' />
                <select ref='select' :value="operator" @change='change'>
                    <option value="eq" :selected="operator === null">Is Equal</option>
                    <option value="neq">Is Not Equal</option>
                </select>
                <button @click="reset">Clear</button>
            </div>`,
    props: {
        grid: Grid,
        field: String,
        filterType: String,
        value: [String, Number, Boolean, Date],
        operator: String
    },
    methods: {
        change (ev) {
            this.$emit('change', { operator: this.$refs.select.value, field: this.field, value: parseFloat(this.$refs.input.value), syntheticEvent: ev });
        },
        reset (ev) {
            this.$emit('change', { operator: '', field: '', value: '', syntheticEvent: ev });
        }
    }
}

Suggested Links

• API Reference of the Grid
• API Index of the Grid