Kendo UI Grid Filters data not updating

Question

Maybe someone can help me with this issue that I have...

My Kendo UI Grid

$("#grid").kendoGrid({            
        dataSource: {
            data: self.positions(),
            pageSize: 50
        },
        filterable: true
    });  

where self.positions() is a knockout observable Array that gets populated via ajax Get.

My problem now is when I refresh my positions observable array and rebind the new data to the grid, the columns filters are not refreshing the data properly. My filters still showing the old positions data.

Any help???

Kendo UI DOJO Example: http://dojo.telerik.com/oVOsi/31

Answer 1

I found this solution which works nicely :

    var grid = $("#grid").data("kendoGrid"); 
    grid.setDataSource(grid.dataSource);
    grid.dataSource.read();

The trick is to use the method "setDataSource()", it will reset all the filters.

http://dojo.telerik.com/oVOsi/103

Answer 2

Calling a query on the grid datasource and clearing the filters/resetting any other attribute on the datasource works for me (with an additional check to ensure filters exist). Something like:

var grid = $("#grid").data("kendoGrid");
var gridDataSource = grid.dataSource;
var filter = gridDataSource.filter();
if (filter) {
    gridDataSource.query({ filter: {}, pageSize: 10, page: 1 });
}

EDIT Now I understand the exact requirement, you can rebuild the grid on each button click (so the column filters are rebuilt according to the data). I have put together a dojo example:

Dojo example of rebuilding grid

Answer 3

Try clearing the filter on the datasource object:

$('#myOtherBtn').click(function(){
  var grid = $("#grid").getKendoGrid();    
  grid.dataSource.data(products2); 
  grid.dataSource.filter({});
  grid.refresh();
  grid.sync();
});