kendo ui - change datasource on tab change

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/