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

Reload tab every time it is clicked

5 Answers 867 Views

TabStrip

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

5 Answers, 1 is accepted

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("");
}
}

}

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">
                   
               </div>
           </text>
           );

       tabstrip.Add()
           .Text("Tab 2")
           .HtmlAttributes(new { id = "MyTabPage2" })
           .Content(
           @<text>
               <div id="divTab2">
                   
               </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

           
           break;

       case 1:   // Tab 2

           
           break;

   }
}