Reload tab every time it is clicked

5 posts, 0 answers
  1. M
    M avatar
    3 posts
    Member since:
    Aug 2012

    Posted 14 Aug 2012 Link to this post

    Hi,

    My tabstrips are pulling in content via ajax.

    I am looking for the ability to have the tabstrip selected load a fresh ajax call every time it is selected, not just the first time.

    Please advise.

    Thanks.
  2. Scott
    Scott avatar
    68 posts
    Member since:
    Nov 2011

    Posted 21 Aug 2012 Link to this post

    I also need to know how to accomplish this....?
  3. Kendo UI is VS 2017 Ready
  4. Kirill Bykov
    Kirill Bykov avatar
    10 posts
    Member since:
    Jan 2009

    Posted 04 Sep 2012 Link to this post

    Here's how I do it:
     }],
            select:function (e) {
                var tabStrip = $("#tabStrip").data("kendoTabStrip");
                for(var idx=0;;++idx) {
                    var tab = tabStrip.contentElement(idx);
                    if(tab==null)
                        break;
                    if(tab==e.contentElement) {
                        //current tab logic
                    }
                    else {
    //all other tabs
                        $(tab).html("");
                    }
                }
                
            }
  5. greytroll
    greytroll avatar
    2 posts
    Member since:
    Jul 2007

    Posted 14 Oct 2012 Link to this post

    Any solutions?
    How tabstrip.reload() works?Any examples.
    Thanks
    Alex
  6. Scott
    Scott avatar
    68 posts
    Member since:
    Nov 2011

    Posted 14 Oct 2012 Link to this post

    I manually took control over how the tab activate behaves without using built-in functionality as it wasn't doing what i wanted... here's some trimmed down code from a project I am working on that does just that... Each time the user clicks on the tab, it'll reload (make ajax call) to refresh tab data/html shown...

    ------------------------------------------------
    --- RAZOR VIEW                             -----
    ------------------------------------------------
    @{ Html.Kendo().TabStrip()
        .Name("MyTabStrip")
        .Items(tabstrip =>
        {
            tabstrip.Add()
                .Text("Tab 1")
                .HtmlAttributes(new { id = "MyTabPage1" })
                .Selected(true)
                .Content(
                @<text>
                    <div id="divTab1">
                        <!-- Content for tab -->
                    </div>
                </text>
                );

            tabstrip.Add()
                .Text("Tab 2")
                .HtmlAttributes(new { id = "MyTabPage2" })
                .Content(
                @<text>
                    <div id="divTab2">
                        <!-- Content for tab -->
                    </div>
                </text>
                );
        })
        .Events(e => e.Activate("onTabActivate"))
        .Render();
    }

    ------------------------------------------------
    --- JAVASCRIPT                             -----
    ------------------------------------------------
    function onTabActivate()
    {
        var args = {};
        args.tabIndex = $("#MyTabStrip").data("kendoTabStrip").select().index();

        switch (args.tabIndex)
        {
            case 0:    // Tab 1

                <!-- Get HTML via $.ajax call and pump in return html into div via something like this=> $("#divTab1").html(ajaxHtml); -->
                break;

            case 1:    // Tab 2

                <!-- Get HTML via $.ajax call and pump in return html into div via something like this=> $("#divTab2").html(ajaxHtml); -->
                break;

        }
    }
Back to Top
Kendo UI is VS 2017 Ready