TabNavigationControl custom navigation

[Blainer Abando]

This is about my concern (incident report http://www.syncfusion.com/support/directtrac/incidents/150103) on TabNavigationControl. I want to navigate to TabNavigationItems without using the built-in navigation buttons, instead i will add a 'previous' and 'next' button for those functions.. Is there a way?

[Ashok Kumar Murugesan]

Hi Blainer,


Thank you for contacting Syncfusion Support.

We have analyzed your query "navigate the TabNavigationItems without using the built-in navigation buttons". We have prepared a sample which tries to meet your requirement. In this sample we have added two buttons 'Previous' and 'Next' to increase or decrease the selected TabNavigationItem index with the help of button click event. Please download the sample for the same from the below link.

Sample: TabNavigation

Regards,

Ashok Kumar M.

[Blainer Abando]

Hello again.

I tried the sample (already answered in the incident report here), and this is what i wanted.

Thanks a lot! It's a big help =)

- Blainer

[Victory Jessie Selvam D]

Hi Blainer,

We are happy to hear that your issue has been resolved.

Please let us know if you need any further assistance.

Regards,

Jessie

[Blainer Abando]

Good day.

I would like to add a concern in this thread, since this relates to the topic.

Using the TabNavigationControl, I plan to navigate through all my pages. However, I cannot add all of the pages via design mode so I wanted to add TabControlItems then navigate in my code behind..
I tested some codes, and my syntax looks like this:

//assuming I am in the tabnavigation's first TabNavigationItem
TabNavigationControl tabnavigation = (TabNavigationControl)VisualUtils.FindAncestor(sender as Visual, typeof(TabNavigationControl));//detects parent TabNavigationControl

//select a particular page where to navigate next
TabNavigationItem item = new TabNavigationItem();
var page = new SampleViews.SamplePage();
item.Content = page;

//add the new TabControlItem to tabnavigation, then navigate
tabnavigation.Items.Add(item);
int lastIndex = tabnavigation.Items.Count();
tabnavigation.SelectedIndex = lastIndex; - 1

I tried the codes and these worked. However I am worrying about two things now:
1) navigating continuously will increase the items of the TabNavigationControl non-stop; and
2) how about the "back" navigation -- how can I go back the previous page? shall I have to detect my current page's index to TabNavigationControl's items then minus 1, then navigate? If that's so, how can it be done "properly"?

Hope I made my questions clear to understand, so you could give me ideas to solve to these concerns.. :-)
Thanks a lot!

Blainer

[Vijayalakshmi Roopkumar]

Hi Blainer,

Thank you for your update,

Query#1: Navigating continuously will increase the items of the TabNavigationControl non-stop;

You can get the TabNavigationControl by passing child TabNavigationItem using Find Ancestor of VisualUtils anywhere in the application. So you can move the codes for add new TabNavigationItem from SelectionChanged and execute the same on demand.

Query#2: How about the "back" navigation -- how can I go back the previous page? Shall I have to detect my current page's index to TabNavigationControl's items then minus 1, then navigate? If that's so, how can it be done "properly"?

Yes, you can go back to the previous page by decrementing the SelectedIndex as demonstrated in our last updated sample that shown in the below Code example:
 

 

TabNavigationControl tabnavigation = (TabNavigationControl)VisualUtils.FindAncestor(sender as Visual,typeof(TabNavigationControl));

if (tabnavigation != null && tabnavigation.SelectedIndex > 0)

tabnavigation.SelectedIndex = tabnavigation.SelectedIndex - 1;

 

 
Please let us know if you have any other concerns,

Regards,

Vijayalakshmi V.R.

[Blainer Abando]

Hello Vijayalakshmi V.R.,

Thanks for emphasizing those codes, I nearly forgot about the use of the codes you gave me.
Hmm I tried it and it worked fine.

I am just wondering now if I navigate forward to many TabNavigationItems using this style, then went back to previous items also several times,
I will leave many idle TabNavigationItems. How can I navigate forward to different TabNavigationItem, considering that I came from the same index?
To make this clear, here's a simple example:


In this navigation sequence, we are sure that LoginPage will always be the SelectedIndex=0, and MainMenuPage is the SelectedIndex=1 of the TabNavigationControl.
Assume we will navigate to CRUDPage, and this item will be marked as the SelectedIndex=2. Then I will go back to MainMenuPage, decrementing the SelectedIndex value.. No problem with that.
But If we want to navigate forward to ParametersPage, and we did our style of navigation, ParametersPage will be marked as SelectedIndex=3, because we added CRUDPage earlier assigning the SelectedIndex=2 already, and we did not do anything like 'deleting' or 'clearing' the indices ahead the current index.

No problem with navigating forward, because I could just set the SelectedIndex to last item, but how can I go back to the 'previous page' I actually came from, now that the items are jumbled..
You can also refer to the attached project.

How can we do this right?

Thanks!

- Blainer

Attachment: NavigationApp_d35eeba8.zip

[Blainer Abando]

Hello..

Answering my own question, I guess I made the navigation work -- clearing the TabNavigationItems ahead the current item every time I go back.
My answer is a for-loop executing tabnavigation.Items.RemoveAt(index).. You can refer to the updated project I attached.

If you can improve the navigation style, pls do suggest here..

Thanks a lot!

- Blain

Attachment: NavigationAppupdated_ef347e86.zip

[Vijayalakshmi Roopkumar]

Hi Blainer,
We have modified the sample according to your requirement. In this sample, we have restricted the adding of duplicate TabNavigationItem, if the page is already added in the view. And for moving back to the main page from each of the pages, we have set the SelectedIndex as 1 in the button click event. 

Please download the sample from the following location:

Sample:NavigationApp_Modified
Regards,
Vijayalakshmi V.R

[Blainer Abando]

Hello Vijayalakshmi V.R,

Nice concept. Now I can continue with my work. I will combine these navigation styles and use them in my app.

Thanks a lot!

- Blainer

[Vijayalakshmi Roopkumar]

Hi Blainer,

We are glad to hear that the reported issue has been resolved. Please let us know if you need any further assistance on this.

Regards,
Vijayalakshmi V.R.