Javascript 在远程数据源调用之前将筛选器注入数据源

我有一个剑道网格，我想在第一次加载时使用自定义过滤器。我正在从一个远程数据源中提取数据，所以我想我应该绑定到

数据绑定

事件，操纵数据源添加一个过滤器，然后将其发送回去

在这一点上我可能是错的，但我的理解是，

dataBinding

是一个触发预数据源读取的事件，这就是为什么我想在那里插入我的过滤器

[更新#1::
我正在使用剑道的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);
    })
)

我创建了一个JSFIDLE来模拟我的场景。我知道这不是我的代码的完全复制品，但它是我的情况的完全复制品：

下面是我对数据绑定事件应用的

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

函数applyCustomFilter（数据源）{
//查找自定义筛选器
var customFilters=myCustomGridFilters.length？myCustomGridFilters:[]；
//如果没有自定义筛选器，则返回
if（customFilters.length==0）返回；
//应用自定义筛选器
//从网格中获取当前应用的过滤器。
var currFilterObj=dataSource.filter（）；
//获取过滤器的当前集合，该集合应为数组。
//如果我们在上面获得的对象为null/未定义，则将其设置为空数组
var currentFilters=currFilterObj？currFilterObj.filters:[]；
//循环自定义过滤器
对于（var i=0；i0）{
对于（var i=0；i

我的工作JSFIDLE示例：

我已经开始工作了，但是我注意到我的网格加载了两次数据；一开始一次，第二次过滤数据。这显然不理想

---

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

只需将您的筛选器添加到数据源。不幸的是，这里阻塞了JSFIDLE，因此无法查看您的代码

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

剑道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"))
    )
)

@（Html.Kendo（）.Grid（））
.名称（“网格”）
.列（列=>
{
columns.Bound（c=>c.Type）；
columns.Bound（c=>c.Count）；
columns.Bound（c=>c.Date）；
})
.可过滤（）
.Pageable（Pageable=>Pageable
.页面大小（真）
.按钮计数（10））
.DataSource（ds=>ds
.Ajax（）
.Read（r=>r.Action（“GetGridData”，“Home”，new{code='code'}））
.页面大小（25）
.Filter（f=>f.Add（a=>a.Type）.Contains（“某物”））
)
)

我正在使用MVC说唱歌手。所以我无法立即访问数据源。很抱歉，我的示例有点误导。您没有在MVC代码中定义数据源吗？你能发布你的网格源代码吗？我正在MVC代码中定义数据源。但是我想纯粹用Javascript来实现这一点，因为我有一个扩展网格功能的JS类，而这个额外的功能最适合在那里实现。我将用这些代码更新我的问题。添加了我的数据源生成器。你知道如何在纯javascript中插入这个过滤器吗？