Tabstrip inside asl:panel tabs

3 posts, 0 answers
  1. Julian Houlding
    Julian Houlding avatar
    5 posts
    Member since:
    Jan 2008

    Posted 26 Jan Link to this post

    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.

  2. Julian Houlding
    Julian Houlding avatar
    5 posts
    Member since:
    Jan 2008

    Posted 26 Jan in reply to Julian Houlding Link to this post

    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.
  3. Julian Houlding
    Julian Houlding avatar
    5 posts
    Member since:
    Jan 2008

    Posted 26 Jan Link to this post

    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

Back to Top