[Solved] Kendo UI Grid – Add/Remove filters dynamically

by


In order to filter by text box you can hook up a keyUp event in order to retrieve the value. You can then add this as a filter to the existing filter object.

$('#NameOfInput').keyup(function () {
    var val = $('#NameOfInput').val();
    var grid = $("#yourGrid").data("kendoGrid");
    var filter = grid.dataSource.filter();
    filter.filters.push({
        field: "NameOfFieldYouWishToFilter",
        operator: "eq",
        value: val,
        FilterName: "UniqueIdentifierForFilter"
    });
    grid.dataSource.filter(filter);
});

Using a drop down box, you can achieve the desired functionality by using the onChange event, get the value using $('#yourDropDown').val();.

The FilterName is optional incase you require additional logic to add/remove filters. i.e. you can use this to determine whether the filter already exists in the array and if so you can use splice to remove it.

EDIT

Using FilterName you can search to see if a filter already exists and remove it:

var filterIndex = filter.filters.map((e: any) => { return e.FilterName }).indexOf("UniqueIdentifierForFilter");
if (filterIndex > -1)
{
    filter.filters.splice(filterIndex, 1);
}

8

solved Kendo UI Grid – Add/Remove filters dynamically