This is a migrated thread and some comments may be shown as answers.

Reload tab every time it is clicked

5 Answers 675 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
M
Top achievements
Rank 1
M asked on 14 Aug 2012, 03:01 PM
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.

5 Answers, 1 is accepted

Sort by
0
Scott
Top achievements
Rank 2
answered on 21 Aug 2012, 03:35 PM
I also need to know how to accomplish this....?
0
Kirill Bykov
Top achievements
Rank 1
answered on 04 Sep 2012, 08:34 AM
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("");
                }
            }
            
        }
0
greytroll
Top achievements
Rank 1
answered on 14 Oct 2012, 06:00 PM
Any solutions?
How tabstrip.reload() works?Any examples.
Thanks
Alex
0
Scott
Top achievements
Rank 2
answered on 14 Oct 2012, 06:18 PM
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;

    }
}
0
Paito
Top achievements
Rank 2
answered on 01 Dec 2017, 04:42 AM
Good suggestion on adding the DIV.  Solved my problem as well.
Tags
TabStrip
Asked by
M
Top achievements
Rank 1
Answers by
Scott
Top achievements
Rank 2
Kirill Bykov
Top achievements
Rank 1
greytroll
Top achievements
Rank 1
Paito
Top achievements
Rank 2
Share this question
or