[Solved] Tabstrip - Load on Demand not working for first tab

[Sean Cross]

I have moved a project from the old Extensions to the new one.  I now have a problem with LoadOnDemand for the first tab.

My view is
        <%
            Html.Telerik().TabStrip()
                .Name("tab")
                .Items(parent => {
                    parent
                        .Add()
                        .Text("General")
                        .LoadContentFrom(Url.Action("GeneralPV", Model));
                    parent
                        .Add()                        
                        .Text("Notes")
                        .LoadContentFrom(Url.Action("NotesPV", Model));                   
                    parent
                        .Add()
                        .Text("Medical")
                        .LoadContentFrom(Url.Action("MedicalPV", Model));                                                                                       
                    }
                )
                .Render();
         %>

When I view the page, the contents of the first tab are empty.  I have to change to another tab, and then change back for the tab to populate.  Any ideas on how to fix?

Sean

[Georgi Krustev]

Hello Sean,

If the first tab is LoadOnDemand, the tabstrip will render collapsed. To load the content you should click the tab item. You can easily reproduce this behavior using LoadOnDemand demo of TabStrip component.

Best wishes,
Georgi Krustev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Sean Cross]

Is there any way to make it render uncollapsed?

Sean

[Georgi Krustev]

Hello Sean,

You can achieve your goal using the client API of the control. Wire the OnDocumentReady event and expand the first item. Here is a code snippet showing how to achieve this:

<% Html.Telerik().ScriptRegistrar().OnDocumentReady(() =>
{
    %>
        var panelBar = $("#PanelBar").data("tPanelBar");
        panelBar.expand($("> li", panelBar.element)[0]);
    <%
    });
%>

I have attached a test project which shows how the suggested approach was implemented.

Sincerely yours,
Georgi Krustev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Sean Cross]

That works for PanelBars but I can't get it to work for a tab strip.

[Georgi Krustev]

Hello Sean,

The suggested method will not work, because the jQuery selector does not return the correct LI element. Please use this one:

var tabStrip = $("#TabStrip").data("tTabStrip");
tabStrip.select($("li", tabStrip.element)[0]);

All the best,
Georgi Krustev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.