javascript - 在远程数据源调用之前将过滤器注入(inject)数据源

Question

我有一个 Kendo Grid，我只想在第一次加载时使用自定义过滤器。我正在从远程数据源中提取数据，所以我想我会绑定(bind)到 dataBinding 事件，操作数据源以添加过滤器，然后将其发送回去。

我在这方面可能是错的，但我的理解是 dataBinding 是一个触发预数据源读取的事件，这就是为什么我想在那里注入(inject)我的过滤器。

[更新#1:]
我正在使用 Kendo 的 ASP.NET MVC 包装器来生成它，但我想通过 Javascript 进行过滤，因为这就是我获取 myCustomGridFilters 数组的方式。我有一个我创建的 JS 网格扩展类，它包含额外的网格功能。这已经为我所有的网格实例化了，所以我不想手动进入每个网格 MVC 包装器初始化并添加过滤器。

作为引用，这是我的 ASP.NET MVC 代码中的数据源构建器:

// remainder of Kendo Grid wrapper
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(ViewUtilities.GetDefaultGridSettings().DefaultPageSize)
    .Read(read => read.Action("ListThreatsOverview", "Threats"))
    .ServerOperation(true)
    .Sort(sort => sort.Add("ActiveInDevices").Descending())
    .Model(model =>
    {
        model.Id(u => u.Id);
        model.Field(u => u.FileHashId).Editable(false);
        model.Field(u => u.CommonName).Editable(false);
        model.Field(u => u.ActiveInDevices).Editable(false);
        model.Field(u => u.BlockedInDevices).Editable(false);
        model.Field(u => u.SuspiciousInDevices).Editable(false);
    })
)

我创建了一个 JSFiddle 来模拟我的场景。我知道它不是我的代码的精确副本，但它是我的情况的精确副本:

这是我应用于 dataBinding 事件的 applyCustomFilter() js 方法:

function applyCustomFilter (dataSource) {
    // find custom filters
    var customFilters = myCustomGridFilters.length ? myCustomGridFilters : [];

    // if no custom filters, return
    if (customFilters.length === 0) return;

    // apply custom filter
    // get currently applied filters from the Grid.
    var currFilterObj = dataSource.filter();

    // get current set of filters, which is supposed to be array.
    // if the oject we obtained above is null/undefined, set this to an empty array
    var currentFilters = currFilterObj ? currFilterObj.filters : [];

    // loop over custom filters
    for (var i = 0; i < customFilters.length; i++) {
        var filterField = customFilters[i].field;
        var filterValue = customFilters[i].value;
        var filterOperator = customFilters[i].operator;

        // iterate over current filters array. if a filter for "filterField" is already
        // defined, remove it from the array
        // once an entry is removed, we stop looking at the rest of the array.
        if (currentFilters && currentFilters.length > 0) {
            for (var i = 0; i < currentFilters.length; i++) {
                if (currentFilters[i].field == filterField) {
                    currentFilters.splice(i, 1);
                    break;
                }
            }
        }

        currentFilters.push({ field: filterField, operator: filterOperator, value: filterValue });
    }

    // apply filters
    dataSource.filter({
        logic: "and",
        filters: currentFilters
    });

    // remove custom filters
    myCustomGridFilters.length = 0;
}

我的 JSFiddle 工作示例:http://jsfiddle.net/fmpeyton/crhLvq44/

我成功了，但我注意到我的网格加载了两次数据；最初和第二次过滤数据。这显然不理想。

最终，我的目标是在第一次加载时过滤我的网格，而不必为了过滤而从我的远程源读取单独的数据源。我怎样才能做到这一点？还有其他我应该订阅的事件吗？

Answer 1

只需将过滤器添加到数据源即可。不幸的是，JSFiddle 在这里被屏蔽了，所以看不到你的代码。

剑道用户界面

var dataSource = new kendo.data.DataSource({
    data: [
        { name: "Tea", category: "Beverages" },
        { name: "Coffee", category: "Beverages" },
        { name: "Ham", category: "Food" }
    ],
    filter: {
        // leave data items which are "Food" or "Tea"
        logic: "or",
        filters: [
            { field: "category", operator: "eq", value: "Food" },
            { field: "name", operator: "eq", value: "Tea" }
        ]
    }
});

剑道 MVC

@(Html.Kendo().Grid<MyModel>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Type);
        columns.Bound(c => c.Count);
        columns.Bound(c => c.Date);
    })
    .Filterable()
    .Pageable(pageable => pageable
        .PageSizes(true)
        .ButtonCount(10))
    .DataSource(ds => ds
        .Ajax()
        .Read(r => r.Action("GetGridData", "Home", new { code = 'code' }))
        .PageSize(25)
        .Filter(f => f.Add(a => a.Type).Contains("something"))
    )
)