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

Question

我需要创建一个 Kendo ui 网格。由于这有很多过滤器，我需要有 4 个常规过滤器，其余的应该能够根据用户的选择动态添加。有人可以提供帮助吗？

Answer 1

为了按文本框过滤，您可以连接keyUp 事件以检索值。然后，您可以将其作为过滤器添加到现有的 filter 对象中。

$('#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);
});

使用下拉框，您可以通过使用onChange 事件来实现所需的功能，使用$('#yourDropDown').val(); 获取值。

FilterName 是可选的，以防您需要额外的逻辑来添加/删除过滤器。也就是说，您可以使用它来确定过滤器是否已存在于数组中，如果存在，您可以使用splice 将其删除。

编辑

使用FilterName，您可以搜索过滤器是否已存在并将其删除：

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

Answer 2

对于@lakshan，虽然这在很大程度上是正确的，但如果一开始没有过滤器，你会得到一个错误。当我遇到未定义的过滤器错误时，我找到了this answer。我将过滤器添加到未定义的过滤器集或与现有过滤器一起添加的完整解决方案：

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

}