Tab reloads control after switching tab

Hello David,

Yes - this is expected behavior, since when the content of the tab item is detached from the visual tree once it should not be visible and then attached to the visual tree when the item content should get visible again.

Regards,
Valentin.Stoychev
the Telerik team

Hi,

is there any workaround for this issue? In our application, in one of the tabs we are connecting our legacy client using browser plug-in and when I switch back to this tab it is reloading the plug-in and terminating the previously started connection. This is also true if we have a Grid in the tab and everytime we switch it reloads the grid again by running the WCF service call etc.

I read somewhere that in native (silverlight) tab control it retains the current state of each tab and does not reload the contents. Is it true? If it is true then why telerik tab control behaves differently?

this is a major concern for our application and this really depends what controls to use for our application.

Please advice as soon as possible.

Thank you very much for your help.

Srinivas

Hi Srinivas,

I created an example where you can see that the Loaded event is called in the standard TabControl just like it is in the RadTabControl. There is a solution for your problem though and I have also included it in the project.

The TabControl removes the content when no longer needed because the content of the TabItem could be anything, including something "heavy".

If this is not the case for you, you can use the TabControl as a Tabstrip control (just for showing buttons) and then show the selected item. Please note though that then the content of all your tab items will be loaded.

Does this work for you?

Best wishes,
Miroslav
the Telerik team

Hello Miroslav,

Hi Srinivas,

As I understand, you would not like to load all the Tabs at once, which of course should not happen.

The you say: "...as we like to allow our users to run more than one transaction at the same time by providing multiple tabs".  Could you confirm that this is what you need:

1. Only the tabs that the user selects should be loaded
2. No tabs should be unloaded (so they will not be reloaded when the user switches to them)
3. Yet, only the currently selected tab should be visible to the user (i.e. you are not expecting the user to see more than one selected tab in the same tab control)

Also, could you share what triggers the transactions.
4. Are you dependent on the Loaded events or on other events that fire again (unexpectedly in your case) when you switch back to the tab.

I am thinking that some kind of caching or flags could prevent the transactions from starting again.

Best wishes,
Miroslav
the Telerik team

Hello Miroslav,

A transaction is like maintaining a "Product Details" (using productdetails.XAML file) and when the user select an option from the RadTreeViewItem then I would like to create a new RadTabItem (dynamically) and load the "Product Details" XAML page in that new tab. After loading the XAML into the new tab the user may want to lookup something else and may select another option from the RadTreeViewItem and when the second selection happens I want to create a new RadTabItem and load the second XAML page in the second tab. But if the user selects "Product Details" option again then I would like to switch to the first tab as the page already loaded once.

Please find below my answers:

1A: Yes and as I explained above, the tabs are created dynamically (maximum 5 only to save memory) when the user selects option from the Menu tree

2A: Yes, we do not want to unload already loaded tabs so that while adding "Product Details" the user can switch to another tab to verify "Product Pricing" details and come back to "Product Details" tab and continue transaction.

3A: Yes, at any given point of time the user is allowed to view or work with only one tab and not more than one.

4A: Mostly Loaded events, the only trigger point to create a tab or load a XAML file is when the user selects an option from the menu tree and possibly in some cases where the user click on a "View Pricing" button of one XAML file and in that case we want to create a new tab and load "Pricing Details" in the new tab.

I thought of exploring options to create flags and control the reload process but I am not sure if the entire XAML file is reloaded or only the methods (code behind) are reexecuted. Also, if you can advice me on the flags, like where to create them and update them etc that would be great.

Thanks
Srinivas

Hello Srinivas,

Thank you for the clarifications!

Here are my thoughts on this, I am not sure whether they all apply to your case. 

The Loaded event is fired when a visual item is added to the Visual Tree. Unfortunately there is no Unloaded event, it is needed sometimes. IMO the Loaded handler should contain only things for UI initialization like focusing a convenient item, and (re)setting properties that are not bound.

In Silverlight there is ISupportInitializae interface (similar to WPF) but for some obscure reason it is internal and used only by some MS controls. It could have helped here.

The place to do one-time initialization could be the constructor for the UserControl and OnApplyTemplate for the custom control (if you have any).

When things are added/removed from the visual tree a big performance hit comes from updating inherited properties, mostly the DataContext. If possible make sure that the pages that are added/removed have a DataContext explicitly set to them. Even if the datacontext is set to the DataContext they would normally inherit. This means that all the controls inside will not rebind on tab switch, which can be expensive, especially for ItemsControls.

To answer your question: When something is added to the Visual tree only the loaded event is called, i.e. no constructors are called or visuals are recreated.

So in short: move one-time initialization of the pages to constructor/OnAppyTemplate or add an isLoaded flag to the controls and make sure that expensive calls happen just once. Also be careful with the DataContext reloading.

I am sorry that I cannot provide more specific advice, but I would have to guess how things work on your side.

Hopefully you will be able to flag/move the expensive initialization.

Best wishes,
Miroslav
the Telerik team

Hello Srinivas,

The discussion is worthy of a blog post, if I have the time I will try to put one together :)

Lets start from further away, you may know most of these things but I still would like to explain them, hopefully they will be useful to the devs that read the forum :).

The DataContext property is inherited through the visual tree. You can set an object as data context to the root panel in your application and it will be inherited throughout your application, every rectangle, every little visual object in all the controls and parts of your application will inherit this data context.

This means that if you replace the DataContext, the whole application will rebind and the whole visual tree has to be walked, the effective DataContext value has to change for every object and this is expensive. You can imagine that you have bound the ItemsSource of a control with, say 1000 items. Since the data context has changed, the binding is reevaluated then the ItemsSource has potentially changed and you have to recreate the items of the ItemsControls. I.e. changing the DataContext property can be expensive.

Now, I simplified the inheritance of the DataContext property. Actually in ItemsControls the DataContext of the container control is NOT the one of its parent. The DataContext of the container is the item itself.

Then there is another case where the DataContext is not directly inherited, the ContentControl.
When you have a content control the visuals in the ContentTemplate are placed as visual children in the content presenter of the content control. Then the Content of the ContentControl is set as a DataContext of these visuals, so that you can have bindings in the ContentTemplate that bind to the Content.
BUT! If you do not use a ContentTemplate and you just set a visual as content, this visual will inherit the DataContext of the ContentControl.

Now we are getting close to your specific case.
1. Whenever you add something to the visual tree if it does not have a DataContext it will inherit the data context of its parent visual. So you are not just adding something, you are adding something and invalidating the DataContext property of some (up to most) of the visuals you add.

2. I understand that you are binding the control and adding UserControl loaded from somewhere else in the ContentTemplate of the TabItem or as its Content. Each time you add this page to the Visual tree it will inherit the current one DataContext. Then when you remove it, it will reset its DataContext. I was worried that you may be experiencing slowdowns because of the reloading.

3. What you can do here is set explicit DataContext to the pages you reload (even if it is the one they would normally inherit). This way when you can cache them without worrying that adding/removing them to the visual tree will be expensive because of the DataContext reset. Of course it depends on how much you bind in these pages. If you do not bind them or you set explicit context you should not experience slowdowns because of this.

So in short: Instead of loading your pages anew, load them just once and cache them. Then do not load them again but show the loaded page, just make sure that resetting the DataContext is not too expensive or set explicit DataContext.

Again, since do not know the specifics of your application I could only guess how it could be optimized.

There are many things to be considered for improving app performance and I am not sure whether this helps you but such things are good to know.

I created a simple example illustrating context inheritance, it is attached.

I would be interested to know whether you managed to improve the performance in your app with some caching or otherwise.

Kind regards,

Miroslav
the Telerik team

Hello Miroslav,

Hello Srinivas,

Sorry for not replying sooner,

Straight to your questions -

1. Yes, this is one way to cache them. Have in mind though that this way the loaded pages will still be added and removed from the visual tree and their Loaded events will fire, so you need to make sure that you have flagged anything expensive that happens there as well.

2. The garbage  collector is not very active in Silverlight and it will let Silverlight eat up a lot of memory before starting to collect (at least this is what I notice on my machine, it can be different elsewhere). Objects will be collected from the heap only if there are no more strong references to them. The RemoveTabItem method certainly removes one strong reference, but there could be more strong references that hold the item in memory. A simple way to see when items are collected is to add a breakpoint  / trace in their destructor or Finalzie() method of the objects you expect to be collected. Investigating memory leaks and garbage collection is best done with the WinDbg but IMO not until simpler things have been tried out.

3. Any place that is visible enough will be fine.

A simple test for memory leaks is to have a WeakReference that points to one of your objects. Then remove all its know references and call GC.Collect() at least twice. Then check whether the WeakReference is alive. If it is, then most probably this object is leaking.

Best wishes,
Miroslav
the Telerik team

Hello Miroslav,

Hi, I found this thread after finding my Loaded event was also being called each time i switched to the tab.  Reading thru the thread I got the impression that the state on each tab was not being stored, as an efficiency measure.

I quickly discovered it is however it is being preserved in between switching around tabs, just that my loading event was being called each time.  (my loading event preloads listboxes etc from the database so we only want to do this once).  

So, to avoid the issue, in my control constructor I now set the Loaded event handling:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

hopefully the tab control does infact preserve state?  if so, this is an easy solution for those all in my scenario.  Hopefully I havn't seriously misunderstood and those values just havn't been garbage collected yet?! 

cheers
ewart

 

 

 

 

 

 

 

 

 

 

 

Hello ewart,

Nope - RadTabControl do not support state at the moment. We have logged this and looking forward on implementing it after Q1.

Regards,
Valentin.Stoychev
the Telerik team

oh thats weird - why is it working for me and on the online demos - in the demos you can see the charts keep their state between tab clicks - and in my app checkboxes and textboxes etc on one tab retain their values when moving around tabs..    is it slow garbage collection?  

I havn't found any problems yet but have not given it a good thrash either - can I not rely on it working in this way or have I misunderstood you?

cheers
ewart.

Hello Еwart,

There are two ways to fill a TabControl with items - directly in XAML or via binding. If you fill the TabControl with items in XAML (as you probably do in your application and as we do in our charting demo) then the content keeps its state, since the TabControl does not remove the content of its items from the visual tree for performance optimization.
However, if you give the TabControl a ContentTemplate and bind it to some collection of items, then switching between tabs makes the TabControl unload the content of the last active item and load the content of the newly selected item. This load/unload operations involve add/remove actions in the visual tree, thus the content does not keep its state.

Let me know how clear this explanations is and if you need further explanation, let me know.

All the best,
Kiril Stanoev
the Telerik team

We are using the RadTabControl with its ItemsSource bound to an ObservableCollection of ViewModels. We have found the behaviour of reloading each tab item when you select it to be problematic. One of our tabs contains a RadGridView and if you reload the grid, it resets and does not know which groups were expanded. Another tab contains an RadHtmlPlaceHolder control, and switching back to the tab causes the web page to be reloaded again.

I have seen some of the possible workarounds for dealing with this, but I would just like to ask if the RadTabControl is likely to support an option to keep the contents of each tab around, and not reload them each time you select a different tab. This would be a very useful feature and we would not have to resort to workarounds.

Hi Geoff Hardy,

When dealing with MVVM you have to maintain your UI states in the ViewModels. For example when you have GridView on a TabItem you have to keep all the states related to the GridView in the associated ViewModel, like SelectedRow and etc... So when rebinding the Content of the tab everything will look the same as before changing the tabs (the UI state have been preserved in the ViewModels).
The other option is not to use ViewModels and declare Tabs in XAML, so no rebinding will take place and the UI states would be preserved in the control itself.

Hope this will help. If you have further questions please contact us.

All the best,
Miro Miroslavov
the Telerik team

Thanks for your reply Miroslav. Unfortunately, having to maintain all the UI state in the view model is not a great solution. For example, on our tab we have a RadGridView with grouped rows. If we were to put the state in the ViewModel, we would somehow have to track the following in the ViewModel:

Hello Geoff Hardy,

Yes you're right. It's little confusing, but in my opinion for your scenario I'll use statically created tabs with grids and stuff, but will use MVVM for DataContexts for each tab. About KeepTabContent -it'll be weird behavior, but very useful and we'll consider it for new versions. Thank you for the suggestion.
If you have further questions please contact us.

Regards,
Miro Miroslavov
the Telerik team

Hello,

Hello mark leavesley,

That could happen if you have set the RenderSelectedPageOnly property of the RadMultiPage to True.
Is that the case?

You can find attached a sample project. The first tab contains a silverlight control (RadUpload in this case) and the other tabs contain only text. You can switch between them without initializing the silverlight control every time.

Best wishes,
Veskoni
the Telerik team

Alas no, I have it set to false. I will examine your solution and see what clues that gives me.

This is a VS2010 solution. Whilst I have this, the solution loads with errors in the designer.

Hi Mark leavesley,

Could you please check this help article which explains how to fix design-time issues? Let us know how it goes.

Regards,
Yana
the Telerik team

Hello,

Hello Mark,

We're waiting for the screenshot. Thanks

Best wishes,
Yana
the Telerik team

Hello,

2nd VS2008 image, additional attachments don't upload when you edit your post.

Hi Mark Leavesley,

Here it's explained how to fix that kind of issues. I hope it helps.


Best wishes,
Yana
the Telerik team

Hello,

Hi,
I'm using RadTabControl and i have a problem with reloading. If add two tabs and edit first tab content and go to second tab and come back it lost the content. If I edit any tab content and click to this tab title and go to another tab and come back it binds and chenges context. I have a lost focus event for textbox(content) if i set break point  to lost focus event and after running i test all situation it's good working but i need to change Note.Content property in lost focus by binding Content textbox with content property. Content property is in Note class.
Can anybody help me?
Please advice as soon as possible
Thanx Jamshed
 

can anybody help me?

Hello Jamshed,

I advise that you post your code and question in the WPF TabControl forum (http://www.telerik.com/forums/wpf/tabcontrol) as we discussed. This thread is quite long already and it is in the SIlverLight forums so people browsing here may not be able to assist.


Regards,

Marin Bratanov
Telerik