在远程数据源调用之前将过滤器注入数据源

Question

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

我可能错了，但我的理解是dataBinding 是一个触发预数据源读取的事件，这就是我想在那里注入我的过滤器的原因。

[更新 #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"))
    )
)