TabStrip getting dataSource from ajax call

[Stefan]

Hi,

I'm trying to do something similar as in the fiddle: http://jsfiddle.net/fPNUN/1/

Except for the data being defined hard coded I am loading a data object via a RESTful webservice call and I am doing all this in an angular directive.

I then try to do something like this:
var promise = helper.fetchData();
promise.then(
  function (result) {
    var data = result.data;
    var tabstrip = element.find(".kendo-tab-strip");

    tabstrip.kendoTabStrip({
      dataSource: data,
      dataTextField: "label",
      dataContentUrlField: "partial",
    });
  }
);

Here is what happens when the page is loaded: 
* The tabs are listed with their labels (obviously the json object has been returned)
* No content is displayed (even though I programmatically select the first tab)
* When I click on one of the tabs for the first time (!!!) the following error is logged in the javascript console: 
Uncaught TypeError: Cannot call method 'abort' of undefined Array[2] angular.js:6173
Uncaught TypeError: Cannot call method 'abort' of undefined kendo.all.js:26958

What is really weird is that the content is then displayed correctly and when I click on the other tabs subsequently everything works and the error is no longer thrown.

[Stefan]

I managed to (partially) resolve this by using a kendoDataSource and calling "append()" in the callback.

This works most of the time (I have to admit). My assumption is that sometimes the results come too late from the server and the tab strip is already rendered completely. In this case the user has to explicitely click on one of the tabs again to see the content. 

[Petur Subev]

Hello Stefan,

I am not sure I understand the problem. The only problem i see is that you are using an older version of jQuery :

http://jsfiddle.net/fPNUN/1/

Could you please clarify your question?

Regards,
Petur Subev
Telerik

[Stefan]

Hi Petur,

the fiddle was just to illustrate what I was trying to do. 

Our setup is basically:  Running KendoUI and AngularJS in a UI framework.

We have the requirement to generate a tabStrip based on information we have to load from the server. 

An example structure that we receive from the server via REST would be:
[{label: 'Tab 1', partial: 'partials/someHtml1.html'}, {label: 'Tab2', partial: 'partials/someHtml2.html'}]

When I try to display this I sometimes have the problem that the tab content is not on the page when it is rendered. The tab labels are there - just the first tab is not selected - when I then select one of the tabs the content is correctly rendered and all is good (even though I get an error from angular on the javascript console on the first tab selection).

My assumption is that this is due to a race condition between the async REST response and the rendering.

[Petur Subev]

Hello Stefan,

We are not sure how to assist you in that case since we cannot observe what you described. If you are using the callback function of your REST request that you mentioned you should not have timing issues. If you need to execute logic when a tab is loaded consider using the contentLoad event of the TabStrip.
http://docs.kendoui.com/api/web/tabstrip#events-contentLoad

Let me know if we can assist you on a particular issue that we can observe.

Kind Regards,
Petur Subev
Telerik