kendo ui - change datasource on tab change - kendo-ui

Question

I've a kendo ui tabstrip on a page. Each page has to display grid from different datasources. I am using kendo-mvvm pattern.
var customderDetails = kendo.observable({
// properties of customer-details
// how do i different datasources on tab change
});
kendo.bind($('#addCustomerDetailsContent'), customderDetails);
addCustomerDetailsContent has tabstrip with 5 tabs.
How do I change datasource on tab change of tabstrip ???

Answer 1

Ir order to change the DataSource of Grid you should use setDataSource method:
grid.setDataSource(new_datasource);
In order to detect tab change, you should bind your handler to activate event on TabStrip
So, it should be something like:
$("#tabs").kendoTabStrip({
activate: function (e) {
// Compute new DataSource for this tab
var aux = ...
$("#grid").data("kendoGrid").setDataSource(aux);
}
}).data("kendoTabStrip");
In the following JSFiddle I show how to switch a grid that is outside the tab: http://jsfiddle.net/OnaBai/6Cuyr/
BUT there is the question -not clear on your original question- if the grid is the tab or not. If it is actually in the tab, I would recommend having as many different grids as tabs and then you do not have to switch datasource (there is always a price associated with setting a new datasource) and then you can do something like:
HTML:
<div id="tabs" data-role="tabstrip">
<ul>
<li>ds1</li>
<li>ds2</li>
<li>ds3</li>
</ul>
<div>
<div data-role="grid" data-bind="source: ds1"></div>
</div>
<div>
<div data-role="grid" data-bind="source: ds2"></div>
</div>
<div>
<div data-role="grid" data-bind="source: ds3"></div>
</div>
</div>
i.e. Define that the content of the TabStrip is a Grid and bind it to the member of you model that contains the datasource for that tab (data-bind="source: ds1">).
Then, the JavaScript would be:
var mvvm = kendo.observable({
ds1 : new kendo.data.DataSource({
data : ...
}),
ds2: new kendo.data.DataSource({
data : ...
}),
ds3 : new kendo.data.DataSource({
data : ...
})
});
// Bind TabStrip to our observable object mvvm
kendo.bind($("#tabs"), mvvm);
You can see it in the following JSFiddle: http://jsfiddle.net/OnaBai/6Cuyr/3/