Telerik MVC : TabStrip Without Content

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

References

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License