Kendo grid retrieves old data when grouping

Question

I am using a Kendo grid with grouping that displays some strange behavior if the grid is re-populated.

Steps to produce odd behavior:

1. On button click grid is created with data source but not data
2. One or more ajax calls are made and results are added to the grid
3. Data is rendered to the grid as expected
4. Click search button again and grid is populated as expected
5. Drag a column into the grouping bar

After step five, the grid is grouped with the original search data.

Click the group button to sort and the updated search is displayed.

Here is the code that adds rows to the grid:

var grid = $('#grid');
var dataSource = grid.data().kendoGrid.dataSource;
if (data.length > 0) {

    $.each(data, function (i, v) {
        dataSource.add(v);
    });       
}

I have tried several things to clear out the data source, including variations on the following:

$("#grid").data("kendoGrid").dataSource.data([ ]);

The old search data is retained somewhere and is not displayed until I starting grouping.

Answer 1

The resolution is clearing data from the grid itself and not the data source.

Calling the destroy method cleaned out all JQuery data attributes and I was able to repopulate the grid with the odd behavior.

var grid = $('#report').data('kendoGrid');

if (grid) {
    grid.destroy();
}