Блог

У меня есть вкладка kendo ui tabstrip на странице. Каждая страница должна отображать сетку из разных источников данных. Я использую kendo-mvvm шаблон.

 var customderDetails = kendo.observable({
            // properties of customer-details
        // how do i different datasources on tab change 
    });
kendo.bind($('#addCustomerDetailsContent'), customderDetails);
  

addCustomerDetailsContent имеет полосу вкладок с 5 вкладками.

Как мне изменить источник данных при смене вкладки tabstrip???

Для изменения ofвы DataSource Grid должны использовать setDataSource метод:

 grid.setDataSource(new_datasource);
  

Чтобы обнаружить изменение вкладки, вы должны привязать свой обработчик к activate событию на TabStrip

Итак, это должно быть что-то вроде:

 $("#tabs").kendoTabStrip({
    activate: function (e) {
        // Compute new DataSource for this tab
        var aux = ...
        $("#grid").data("kendoGrid").setDataSource(aux);
    }
}).data("kendoTabStrip");
  

В следующем JSFiddle я показываю, как переключать сетку, которая находится за пределами вкладки: http://jsfiddle.net/OnaBai/6Cuyr /

НО есть вопрос — неясный в вашем первоначальном вопросе — является ли сетка вкладкой или нет. Если он действительно находится на вкладке, я бы рекомендовал иметь столько разных сеток, сколько вкладок, и тогда вам не нужно переключать источник данных (всегда есть цена, связанная с установкой нового источника данных), а затем вы можете сделать что-то вроде:

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>
  

т.е. Определите, что содержимое TabStrip является a Grid , и привяжите его к элементу вашей модели, который содержит источник данных для этой вкладки ( data-bind="source: ds1"> ).

Тогда JavaScript будет:

 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);
  

Вы можете увидеть это в следующем JSFiddle: http://jsfiddle.net/OnaBai/6Cuyr/3 /