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.

From where are you calling the action to generate the view, and are you sure that you are writing the view in the place of the old tabstrip in the DOM? (perhaps to a div containing the tabstrip?). If it was up to me I would hide the tabs with javascript instead of reloading the entire tabstrip. I am eager to help you, but I am only familiar with Kendo (the successor to Telerik MVC), and I can't seem to find the API documentation for Telerik MVC to help find a solution. — Nameless One
@user2420536 - Thanks for the reply. I'm calling this form my Home/Index action (return View()) which calls _Layout.cshtml which in turn calls RenderBody() to render the View shown above. I was originally intending to set the Grid's Visible property from javascript as required, however, I found that this only worked if the initial state was true. I didn't really want the tabs appearing even momentarily if not required. — Alan Gee

Nameless One Nameless One · Accepted Answer · 2013-07-29T20:04:44

(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

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

1 Answers