Navigating between parent and child tabstrips

2 posts, 0 answers
  1. Nicholas
    Nicholas avatar
    1 posts
    Member since:
    Mar 2016

    Posted 16 Aug Link to this post

    Hello,

    We have a requirement to navigate between tabs using back and next buttons; an additional requirement is that if a tab contains a child tabstrip the next button should begin navigating through the child tabs before continuing on with the parent tabs.

    The basic structure is as follows:

    Parent tabstrip contains tabs 1, 2, 3. Tab 2 contains a child tabstrip with tabs 4, and 5.

    Beginning on tab 1, clicking the next button should select tab 2. Once on tab 2 clicking next should select tab 4. Once on tab 4 clicking next should select tab 5. Once on tab 5 clicking next should select tab 3. Clicking back should do the reverse.

    I have no problem going forward from 1 -> 2 -> 4 -> 5; I have no problem going back within a single tabstrip 5 -> 4 or 2 -> 1, however, going from child up to parent , 4 -> 2, doesn't work; it seems tab 2 never has gets selected or activated.

     

    Any ideas on how to accomplish this? I've included a simplified prototype of our initial approach.

    Thanks for any advice.

  2. Dimitar
    Admin
    Dimitar avatar
    225 posts

    Posted 18 Aug Link to this post

    Hello Nicholas,

    When you want to go back from Tab3 to Tab2, the latter is currently active and selected. I would suggest to try changing the container.select(..) to use the TabStrip's activateTab() method instead:
    container.activateTab($("#" + currentLocation.backId));

    By implementing the above modification in both the onBackClicked() and onNextClicked() functions, you will notice that the navigation flow is working as expected.


    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top