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:
- Set the filterable and filter options of the Grid.
- 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 thefilterRender
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:
var 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 });
}
}
}