Kendo UI Grid - 动态添加/删除过滤器

Question

I need to Create a Kendo ui grid. Since this has many filters, I need to have 4 regular filters and rest should be able to add dynamically according to users choice. Can someone provide assistance on this?

Answer 1

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. ie 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);
}

Answer 2

For @lakshan, while this is largely correct, you will get an error if there are no filters at first. I found this answer when I encountered the undefined filter error. My full solution for adding a filter, either to an undefined filter set, or along with an existing one:

var grid = $("#ActivityGrid").data("kendoGrid");
var dataSource = grid.dataSource;
var gridFilter = dataSource.filter();
var upcomingFilter = {
    field: "ActivityDate",
    operator: "gte",
    value: new Date(),
    FilterName: "UpcomingOnly"
};
if ($("#UpcomingOnlyCheckbox")[0].checked) {
    if (gridFilter == undefined) {
        dataSource.filter(upcomingFilter);
    }
    else {
        gridFilter.filters.push(upcomingFilter);
        dataSource.filter(gridFilter);
    }

}