How can I make Telerik TabStrip tabs persist between page requests?

Question

Hi,

in Telerik ASP.NET MVC TabStrip, I want the page to remember which tab was selected last and persist the selection through multiple page requests. What I have is a partial view that shows in multiple pages and it contains the TabStrip. With SelectedIndex the set tab always get selected, which nullifies user's selection.

Answer 1

I couldn't find any official way of doing this through the Telerik APIs, nor any useful advice on their forum, so I decided to go it my own way with the use of:

1. Html.Telerik().TabStrip().ClientEvents() both the OnSelect() and OnLoad()
2. The cookie plugin for jQuery

Then I wired them up as below, in the partial view that contains the TabStrip.

.ClientEvents(events => events
.OnSelect(() =>
{ 
    %>
    function(e) {
        var item = $(e.item);
        $.cookie('selectedTabIndex', item.index(), { path: '/' });
    }
    <%
})
.OnLoad(() =>
{ 
    %>
    function(e) {
        var tabStrip = $("#TabStrip").data("tTabStrip");
        var index = $.cookie('selectedTabIndex');
        var domElement = $("li", tabStrip.element)[index];
        tabStrip.select(domElement);
    }
    <%
})

)

Edit: I realised that my answer was little bit lacking in explanation so I've added:

In case it's not obvious, the OnSelect is capturing the index of the selected tab when it is selected and writing that to a cookie called selectedTabIndex. The path is being set so it will cover our whole site, but if you leave that out it will create a new cookie for each different path (which may be your desired behaviour). Someone more familiar with the jQuery cookie plugin please correct me if I'm wrong there, I haven't used it much.

Then in the OnLoad it's doing the opposite, basically. It finds the tabStrip, gets the index from the cookie, then gets the domElement of the tab at the index from the cookie and tells the tabStrip to select that domElement.

This seems to work pretty well in Chrome and IE, but there may be some quirks in FFox 3.

I hope the Telerik team considers adding this to their API, as it strikes me as being a pretty useful feature to have baked-in. Apologies if it already is, but I couldn't find it in the docs.