1. Home
  2. Forum
  3. Blazor
  4. Re-ordering Tabs

Re-ordering Tabs

I have TabItems declared in Razor markup.

Depending on data, I would like to re-order the TabItems.

Is that possible?

And if so what would be the general approach?

9 Replies 1 reply marked as answer
HB Hareesh Balasubramanian Syncfusion Team April 20, 2021 07:01 AM UTC

Hi Woody,

Greetings from Syncfusion Support.

We have checked the reported query 're-order tab items' at our end and let you know that you can dynamically re-order the tab items with drag functionalities. Please refer to the following demo and UG link.
https://blazor.syncfusion.com/demos/tabs/drag-and-drop?theme=bootstrap4 
 
Please let us know if you need any further assistance on this.

Regards,
Hareesh. 


WC Woody Chin April 20, 2021 04:09 PM UTC

I should have clarified: re-ordering tabitems programmatically and not by manually drag and drop.

Possible?

SK Satheesh Kumar Balasubramanian Syncfusion Team April 21, 2021 04:12 PM UTC

Hi Woody,

Thanks for your update.

We have validated your reported query "Re-ordering Tabs" at our end and prepared sample to reorder the last tab item in middle of tab using foreach loop rendering on button click. Please find the sample in the following link.


Index.razor: 
    void ReorderItemClick()
    {
        if (TabItems.Count > 0)
        {
            TabData item = TabItems[TabItems.Count - 1];
            TabItems.Insert(1, item);
            TabItems.RemoveAt(TabItems.Count - 1);
        }
    }

Kindly try the above sample and if the issue persists at your end kindly share the below details to server you better?
  • Share more details about your requirement
  • Share tab related code snippets
Regards,
Satheesh Kumar B


Marked as answer
WC Woody Chin April 21, 2021 04:23 PM UTC

Thanks that is awesome. Appreciate the solution.

NR Nevitha Ravi Syncfusion Team April 22, 2021 08:53 AM UTC

Hi Woody,

You are most welcome..! We are glad that our provided solution helped you. 
 
Please get back to us if you need any further assistance.

Regards, 
Nevitha 


SL Steve Littleford February 10, 2022 06:30 AM UTC

Your not really reordering the Tabs though are you - your sample is actually just relabelling the existing tab header and content based on the values in your class. You are not picking up the last tab and putting it in second spot. Is there a way to physically reorder the tabs?



For example - if i had a series of orders on a grid  (say 3) - each on its own tab and labelled accordingly in the header


Tab 1 - Order 2, Tab 2 - Order 4, Tab3 - Order 8.

I then select to Add Order 6.  

I want Order 6 to appear in numerical order - so moved tab and all to position 3 ,and Order 8 moved to position 4. 

Right now no matter what i do - Order 6 will end up as the last Tab. 

Is there a way to do this properly and not as per your example - just relabelling and not really moving it. 

Regards

Steve




SK Satheesh Kumar Balasubramanian Syncfusion Team February 11, 2022 11:23 AM UTC

Hi Steve, 
  
You can re-order the tab items physically with drag functionalities. Please refer the following demo and UG link. 
  
  
Please let us know if you need any further assistance on this. 
  
Regards, 
Satheesh Kumar B 


SL Steve Littleford February 17, 2022 06:01 AM UTC

i want to be able to order them programmatically? is this not possible?


SK Satheesh Kumar Balasubramanian Syncfusion Team February 18, 2022 10:26 AM UTC

Hi Steve, 
  
Yes, we can order them programmatically. Please find the solution below. 



Loader.
Up arrow icon