Reload tab every time it is clicked

6 posts, 0 answers
  1. Jianwei
    Jianwei avatar
    20 posts
    Member since:
    Feb 2011

    Posted 17 Apr 2013 Link to this post

    I know this question has been asked before, however, I didn't see a good answer for it.  Basically, I want my  tab to fire ajax call to get fresh content every time the tab is changed, not just the first time. Is there a configuration or recommended way that I can achieve this?

    Jianwei
  2.
  3. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 19 Apr 2013 Link to this post

    Hello,

    Did you try to achieve it through the reload method of the TabStrip?

    var ts = $(tabstrip).data().kendoTabStrip;
    ts.tabGroup.on('click','li',function(e){
         ts.reload($(this));
    })

    Kind regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Josh
    Josh avatar
    7 posts
    Member since:
    Jun 2013

    Posted 13 Apr 2015 in reply to Petur Subev Link to this post

    I've tried this and it does work.  However now the first click executed the load twice.  Is there a way to determine if content has been loaded before calling reload?
  7. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 15 Apr 2015 Link to this post

    Hello again,

    What you can do to avoid multiple requests is to check if the content element is an empty one. Here is a runnable example:

    http://dojo.telerik.com/@pesho/ehUne/2

    Regards,
    Petur Subev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8.
  9. Josh
    Josh avatar
    7 posts
    Member since:
    Jun 2013

    Posted 15 Apr 2015 in reply to Petur Subev Link to this post

    Thanks.  I'll keep this in my back pocket.  I ended up with this which seems to work at the moment,

    var tabStrip = $("#defaultMenuItems").data("kendoTabStrip");
    for (var idx = 0; ; ++idx) {
        var tab = tabStrip.contentElement(idx);
        if (tab == null)
            break;
        if (tab == e.contentElement) {
            //current tab logic - just let it go
        }
        else {
            //all other tabs
            $(tab).html("");
        }
    }

  11. Josh
    Josh avatar
    7 posts
    Member since:
    Jun 2013

    Posted 15 Apr 2015 in reply to Petur Subev Link to this post

    Thanks.  I'll keep this in my back pocket.  I ended up with this which seems to work at the moment,

    var tabStrip = $("#defaultMenuItems").data("kendoTabStrip");
    for (var idx = 0; ; ++idx) {
        var tab = tabStrip.contentElement(idx);
        if (tab == null)
            break;
        if (tab == e.contentElement) {
            //current tab logic - just let it go
        }
        else {
            //all other tabs
            $(tab).html("");
        }
    }

Back to Top