This is a migrated thread and some comments may be shown as answers.

Navigating between parent and child tabstrips

1 Answer 38 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Nicholas
Top achievements
Rank 1
Nicholas asked on 16 Aug 2017, 04:33 PM

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.

1 Answer, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 18 Aug 2017, 01:09 PM
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.
Tags
TabStrip
Asked by
Nicholas
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Share this question
or