This website is no longer actively supported
Written by John DeVight on 19 May 2011 13:18
Last Updated by John DeVight on 15 Mar 2013 20:41
Problem
I responded to a post on the Telerik forum today about having a Telerik MVC TabStrip that doesn't display any content. When a tab on the TabStrip is clicked, the TabStrip.tTabStrip.activateTab function is called. The activateTab function sets the activated tab's class to "t-item t-state-active" and all the other tab's class to "t-item t-state-default". It also sets the activated tab's content class to "t-content t-state-active" and the other tab's content class to "t-content".
Solution
The solution was to override the activateTab function for the instance of the tabstrip and not the tabstrip class. I do this in case there is a need to have other tabstrips that do display content.
If I had a tabstrip called "MyTabStrip" with 3 tabs, this would be the code to add to the Html.Telerik().ScriptRegistrar().OnDocumentReady() function:
@{
Html.Telerik().ScriptRegistrar()
.OnDocumentReady(
@<text>
$('#IndexTabStrip').data('tTabStrip').activateTab = function(d) {
var f = d.parent().children().removeClass("t-state-active").addClass("t-state-default").index(d);
d.removeClass("t-state-default").addClass("t-state-active");
}
$('#IndexTabStrip').height(25);
$('#IndexTabStrip-1').css('display', 'none');
$('#IndexTabStrip-2').css('display', 'none');
$('#IndexTabStrip-3').css('display', 'none');
</text>
);
}
Update
This function has been added to telerik.extension.js at: Telerik MVC : Extending the Client API and can be implemented at follows:
@{
Html.Telerik().ScriptRegistrar()
.OnDocumentReady(
@<text>
$('#IndexTabStrip').data('tTabStrip').hideContent();
</text>
);
}