Tabstrip inside asl:panel tabs

[Julian Houlding]

Hello all,

This is more of a general question so I have opted to not include too much code with this question.  I can provide more if it will help find a good solution.

I have an existing tab layout where the tabs link to asp:panels in the page that in turn render a TabStrip and a Grid below:

                        Html.RenderAction("GetTabStrip", new RouteValueDictionary { { ..., ...} });
                        Html.RenderPartial("Grid", Model["Grade"], new ViewDataDictionary(this.ViewData) { { "gridName", "..." }, { "dsReadAction", "..." } });

The tab layout basically serves as a TabStrip before we adopted the ASP.NET MVC flavour of Telerik.  I have two such tabs in this layout that both render a TabStrip and Grid like above.

 

The first TabStrip works great - I am able to scroll horizontally (since there are a lot of tabs), and the content is shown as expected.  But the second TabStrip does not scroll and the content does not show up.  The k-tabstrip-items list elements seem to be different between the two TabStrips.  Here is an li element from the first TabStrip:

   <li class="k-item k-state-default" role="tab" aria-controls="tabstrip-2"><span class="k-loading k-complete"></span><a class="k-link" href="#tabstrip-2">New York - i really hope the scrolling works</a></li>

...and from the second TabStrip:

   <li class="k-item k-state-default" ><a class="k-link" href="#tabstrip-2">New York - i really hope the scrolling works</a></li>

...so the second element is missing the following attributes and span tag:

role="tab" aria-controls="tabstrip-2"><span class="k-loading k-complete"></span>

 

I believe this could be the source of my issues, but I am unsure if this implementation will even work.

 

Thanks for reading - any feedback is appreciated.

[Julian Houlding]

I should add that the second TabStrip still contains all of the tabs - but instead of allowing horizontal scroll the tabs appear on a newline.

[Julian Houlding]

In case this helps anyone else, I'm pretty sure the asp:panel tab panel was interfering with the TabStrip functionality.  Converting it to another TabStrip seems to have solved all the issues described above.

 

Below is a dojo link that I used as a proof of concept for nested TabStrips:

http://dojo.telerik.com/UhaTo