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来模拟我的场景。我知道它不是我的代码的完全复制品，但它完全复制了我的情况：

以下是我应用于applyCustomFilter()事件的dataBinding 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在这里被阻止，所以看不到你的代码。

Kendo UI

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

Kendo 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"))
    )
)

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

1 个答案: