Navigating between parent and child tabstrips

[Nicholas]

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.

[Dimitar]

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