重置kendo多重过滤器复选框dataSource以反映过滤后的数据

时间:2015-04-22 13:17:42

标签: javascript jquery asp.net-mvc angularjs kendo-ui

我正在尝试在多个字段上过滤数据源。我的网格上有一个Kendo Multi filter复选框选项。我为每一列初始化每个Kendo多重过滤器。

之后我使用像这样的javascipt函数应用过滤器,并将网格数据设置为过滤数据。

                               [-------------loader here-------------]
           Loader text (plz wait, etc.) in one line, both centered horizontally and vertically

因此该函数将过滤器应用于网格。现在当我单击Kendo多重过滤器选项时,旧数据源中的所有数据都会显示在过滤器列表中。

我该如何避免这种情况?我只需要过滤的数据仅在过滤的列表中可用,而不是整个dataSource项。我没有这个 在执行filterGrid()函数后初始化Kendo多重复选框过滤器时出现问题。有没有办法重新初始化的来源 (“kendoFilterMultiCheck”)每列?我附上了一个jsfiddle示例来演示相同的内容。

1)首先通过单击带有初始dataSource的列标题初始化所有filter multi复选框 2)点击过滤按钮 3)dataSource被替换 4)点击过滤器多检查新数据源 - 旧过滤器数据出现在列表

http://jsfiddle.net/Sbb5Z/1712/

2 个答案:

答案 0 :(得分:0)

M建议为多过滤器复选框定义自定义数据源,并只需调用其读取方法即可重新加载数据。

$("th.k-filterable[data-field='ratingPlace']").data().kendoFilterMultiCheck.checkSource.read();

Reload Multiselect Filter Box when grid data changes

答案 1 :(得分:0)

这基本上是对Telerik论坛上给出的solution进行调整,并将其更改为使用本地网格数据而不是单独的数据源。该代码还对新的过滤器数据进行排序(这是我原来遇到的问题)。

  function removeDuplicates(items, field) {
     var getter = function (item) { return item[field] };
     var result = [];
     var index = 0;
     var seen = {};

     while (index < items.length) {
        var item = items[index++];
        var text = getter(item);

        if (text !== undefined && text !== null && !seen.hasOwnProperty(text)) {
           result.push(item);
           seen[text] = true;
        }
     }

     return result;
  }

  function onFilterMenuOpen(e) {
     // Refresh and Sort the multi-filter selections
     if (e.field == "ratingPlace") {
        // Build up list of unique values for this column
        var gridView = $("#grid").data("kendoGrid").dataSource.view();
        var uniqueDsResult = removeDuplicates(gridView, e.field);

        // Empty the existing filter and populate with new data
        var filterMultiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMultiCheck")
        filterMultiCheck.container.empty();
        filterMultiCheck.checkSource.data(uniqueDsResult.sort());
        filterMultiCheck.createCheckBoxes();
     }
  }