Binding grid row change to 2nd Grid

[Chris]

I've got a 3 areas on my page: a main grid, a form, and a tabbed area with many grids. When the main grid row changes, I fire off 2 functions. The first function "getRole" populates the form, the 2nd function "populateGrids" updates the grids in the tabs. The tabbed grids are binding fine, but instead of the data refreshing, the new data is added to the old recordset. Refresh() and read() do not work in this case. Is there a way to destroy the grids prior to running "populateGrids"? Code below. Thanks for the assistance - love the framework. 

$("#mygrid").kendoGrid({
columns:[ my columns ],
dataSource: {
data: [ my data ]
},
change: function(r) {
var key = this.dataSource.view()[this.select().index()];
       getRole(key.roleID);
populateGrids(key.roleID);
   }
 });

[Chris]

I solved this by inserting the following function prior to my kendogrid function:

$("#mygrid").empty();

$("#mygrid").kendoGrid({
columns:[ my columns ],
dataSource: {
data: [ my data ]
},
change: function(r) {
var key = this.dataSource.view()[this.select().index()];
        getRole(key.roleID);
populateGrids(key.roleID);
    }
  });