RadTabControl TabReorder

[Nasir]

Hi,

we are using a TabControl where the TabItems are generated at runtime and an ObservableCollection is bound to the ItemSource.
I have set the AllowDragReorder to True but for some reason only one tab can be dragged and re-ordered. I am not sure what is causing this behaviour.

Can someone please help?

Regards,


Nasir

[Milena]

Hi Nasir,

I tried to reproduce the issue locally, but I was not able to. I'm sending you a project where you can see a simple implementation of the RadTabControl in data-binding scenario and  where the AllowDragReorder functionality works as expected.
However, we might miss important part of your implementation. This is why I believe it will be better if you can modify the project I sent you. This will allow us to examine your implementation and try to reproduce the issue locally. 

Thank you in advance for your cooperation on the matter.

Regards,
Milena
Telerik

[Nasir]

Thanks for replying.

I have managed to reproduce the issue in a test project. Basically when you have tabs already created e.g. 5 tabs is the bound object.
If you set a new object to an existing index e.g. create a new object (don't add it to the collection or insert) but set it on an existing index e.g Tabs[0] = New bound object.

This disables Drag reordering on the Tab[0]. The rest of the tabs can be dragged and dropped but any existing tab content updated via an index seems to have disabled the Drag Reorder.

Support ticket:
http://www.telerik.com/account/support-tickets/view-ticket.aspx?threadid=765034

Thanks.

[Milena]

Hello Nasir,

Thank you for reporting this issue. I have forwarded it to our developers so they will take a look at it. 

In the meantime, as a workaround you can add the new TabItems as follow:

private void InsertTab_OnClick(object sender, RoutedEventArgs e)
{
    var vm = this.DataContext as SampleViewModel;
    //vm.Items[0] = "New tab";

    vm.Items.RemoveAt(0);
    vm.Items.Insert(0, "New Item");
}

Let me know if this information helps or if you have any further questions.

Regards,
Milena
Telerik

[Nasir]

Hi Milena,

I have already tried removing and inserting the tab which restores the re-ordering correctly but it then messes up the rest of our business logic.

The way our code works is we have a Tab history setup. So each tab can have its own navigation history i.e. a single tab can display different types of content. We need to retain the 'created' RadTabItem and only change its content by doing vm.Items[0] = "New Content".
This gets logged as a history over time so if the user then navigates forward or backward (using dedicated buttons) on a single tab, this same tab will be able to show different content.

Now the problem is when you remove a tab and add it again, it destroys the visual element and creates a completely new one which messes up the History for this tab.

We are still working out if we can make it work using the approach you suggested which we already tried before posting the question here but still trying to make it work the way we want.

Regards,

Nasir

[Milena]

Hi Nasir,

Thank you for the given details about your implementation and your requirements. I'm attaching an edited project where you can find a workaround. What we have changed - we use the ItemsSource CollectionChanged event which is fired after modifying the RadTabItems collection and we make each RadTabItem draggable by setting the DragDropManager.SetAllowCapturedDrag to true.

Let me know if this works for you or in case you have any further questions.

Regards,
Milena
Telerik

[Nasir]

Hi Milena,

Thank you very much that will resolve the issue but we are using MVVM where we don't have access to the Tab control in the view model so I can use the workaround as it is. Is there a way I can do this in MVVM?

Regards,


Nasir

[Nasir]

Hi Milena,

No worries, I have used the tab control's SelectionChanged event with the same code you posted and it works great. Thanks again!