Reset kendo Multi filter checkbox dataSource to reflect filtered data

Question

I am trying to filter datasource on multiple fields. I have a Kendo Multi filter checkbox option on my grid. I initialize every Kendo multi filter for every column.

After that I apply a filter using a javascipt function like this and I set the data of the grid as the filtered data.

function filterGrid() {
    var grid = $("#grid").data('kendoGrid');
    var filter = [];
    filter.push({ field: "ratingPlace", operator: "startswith", value: "US" });
    grid.dataSource.filter(filter);
    grid.dataSource.data(grid.dataSource.view());
}

So the function applies a filter to the grid. now when iI click the Kendo multi filter option, all the data in the old datasource appears in the filter list.

How can I avoid this? I need only the filtered data to be available only in the filtered list rather than the entire dataSource items. I do not have this issue when I initialize the Kendo multiple checkbox filter after executing the filterGrid() function. Is there any way to re-initialize the source of the ("kendoFilterMultiCheck") of each column?? I have attached a jsfiddle example to demonstrate the same.

1) first initialize all the filter multi checkbox by clicking on column header with initial dataSource 2) click on filter button 3) dataSource is replaced 4) click on filter multi check with new dataSource - old filter data appears in list

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

Answer 1

My suggestion is to define custom DataSource for the multi filter check box and just call its read method in order to reload the data.

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

Reload Multiselect Filter Box when grid data changes

Answer 2

This is basically tweaking the solution given on Telerik forums and changing it to use local grid data rather than separate data source. The code also sorts the new filter data (which is original problem I had).

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