Why do I have to do a page refresh to get my Telerik TabStrip to update in ASP.Net MVC 4?

Question

I am trying to show/hide Tabs depending on a user access level that I pass to my View that contains a Telerik tabStrip as shown below:

@{  Html.Telerik().TabStrip()
.Name("Main_Tabstrip")
.Items(tabstrip =>
{
    tabstrip.Add()
        .Visible((int)ViewData["UserLevel"] < 2)
        .Text("Topic A")
        .LoadContentFrom("_TopicATab", "TopicA");
    tabstrip.Add()
        .Visible((int)ViewData["UserLevel"] < 2)
        .Text("Topic B")
        .LoadContentFrom("_TopicBTab", "TopicB");
    tabstrip.Add()
        .Visible((int)ViewData["UserLevel"] < 2)
        .Text("Topic C")
        .LoadContentFrom("_TopicCTab", "TopicC");
})

However, when I call the Action that generates the View after a change in user status, although the View appears to update (I can step through it and see the UserLevel change) the Tab visibility remains as it was on the first rendering of the view.

If I subsequently refresh the Page either in the browser or via a JavaScript location.reload() call then the Tab Visibility works fine.

Additional information: The Action referred to above calls View() to Render the full page that contains the above View.

Although I was able to work around the problem on this occasion by doing a page reload in JavaScript, I would really like to know why this was necessary and would appreciate any suggestions or solutions.

Answer 1

(I am posting this as an answer, since it is too long for a comment.)

Sorry, I should have been more specific. I meant from where in the page are you calling the action?

Your action returns some html (generated from the view) that is returned to the browser and one of two things happen depending on how the action was called:

(1) The whole page is replaced (and the browser might change the displayed address depending on the request verb)

(2) A part of the page, for example the content of a div, is replaced.

To accomplish (1) you will probably use a call to Html.ActionLink or an old fashioned anchor tag. I would however advise you to use (2) instead, since it can give better UX, but it is harder to do. You would make an Ajax call, either via jQuery's ajax method, or an Ajax.ActionLink call.

So basically my counter-question was about which of these you are using. My suspicion is that you are requesting the action, but not writing the response anywhere. Can you perhaps show code for the action and the rest of the view, or reduce it to a minimal example to paste here?

More to the point of your question though, I have looked around a little and you are right that showing/hiding the tabs with javascript is not supported out-of-the-box. I did however find these two posts which might still help you http://www.aspnetwiki.com/page:extending-the-telerik-mvc-client-api http://www.aspnetwiki.com/telerik-mvc:dynamically-add-a-tab-to-the-tabstrip