TabStrip getting dataSource from ajax call

5 posts, 0 answers
  1. Stefan
    Stefan avatar
    4 posts
    Member since:
    Nov 2012

    Posted 28 May 2013 Link to this post

    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.
  2. Stefan
    Stefan avatar
    4 posts
    Member since:
    Nov 2012

    Posted 29 May 2013 Link to this post

    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. 
  3. Kendo UI is VS 2017 Ready
  4. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 30 May 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Stefan
    Stefan avatar
    4 posts
    Member since:
    Nov 2012

    Posted 30 May 2013 Link to this post

    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.
  6. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 03 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready