problem of lazy loading tab

[Alex Fan]

Hi

In a page, I have ValidationSummary control at the top, a TabControl taking rest of the space which has 2 tabs (validation error exists in each tab right at the beginning).

- ValidationSummary relies on BindingValidationError bubble event.
- by default TabControl renders/loads in a lazy manner (only when user clicks on the tab to make visible for the first time, then it renders that tab and keep it in cache),

because of above 2 facts, when this page is loaded up, ValidationSummary only displays validation errors from first tab (because the first tab is selected by default). The second tab is not event loaded yet so the validation errors in it will never be captured by ValidationSummary. I think it is not a problem specific to TabControl, but to any other controls having lazy loading feature.

So my question is if there is any work around? Or any way to force TabControl to render all tabs at the beginning (to disable lazy loading)

Regards,
Alex

[Petar Mladenov]

Hi Alex Fan,

Yes, this is normal for other controls like RadTreeView, RadPanelBar. They generate their containers when needed (when selection is made in RadTabControl, or expansion of parent item is made in RadTreeView, RadPanelBar). unfortunately, there is no elegant way to load the content of every tab in your scenario. I suggest you to try different validation methods (or custom validation). Feel free to ask if you have further questions.

All the best,

Petar Mladenov
the Telerik team

[Alex Fan]

Hi Peter

In my case, it is quite simple and everything is static: 1 validationsummary on top, 2 static tabs at bottom, I can put in not-elegent code in the code behind if it is the only workaroud, The requirement is to not change layout and still have summary working (add/remove validation errors). Would you be abe to give some ideas? Thanks a lot

Alex

[Petar Mladenov]

Hello Alex Fan,

 Unfortunately, we are not aware of easy way to achieve this kind of validation over the two tabs.

Best wishes,
Petar Mladenov
the Telerik team

[hwsoderlund]

I "solved" this exact problem years ago with the ugliest hack ever:

• Add a Border or similar to your page that hides the entire RadTabControl.
• Start a DispatcherTimer. Have it tick every 100ms or so.
• On the first Tick event of the timer, focus the first tab item.
• On the second Tick, focus the second tab item.
• Repeat if you have more tabs that need pre-loading.
• When you are done focusing the tab items, kill the DispatcherTimer and hide the Border.

This was written when Silverlight was in version 2 and MVVM was not really an option. If I would have written the same app today I would have done the validation stuff differently.

[Alex Fan]

you god damn genius, thanks for the ideas :) I think event with sl4, we might still have to use this hack, coz validation summary is relying on the bubble event from invalid control, as long as this control is not created, validation summary will not be away of any errors.

when you said things could be done differently, i guess you were trying to bind itemssource of validation summary to view model and let it directly read validation errors in view model via a property, but it is not an option for validation summary control. it doesnt expose its itemssource as dependency property, unfortunately.

Alex

[hwsoderlund]

Finally someone confirms my genious. In my heart of hearts I have always felt it.

Seriously though, what I meant by doing things differently was that I would probably have designed the UI in a way so that validation across several tabs would not have been necessary at all. But given our current UI design we have no choice. When we write new UI for our product today we use our own version of validation summary control which uses an ItemsControl and just displays the errors in a list. The problem with that approach is that there is no easy way to indicate to the user in which of the tabs he/she will find the field that needs correction. Which is obviously bad user experience. So I have yet to find the perfect solution for this.

[Alex Fan]

I have solved that problem in a different way. i created a behavior for radtabcontrol, on loaded event it loops through each tab and set the IsSelected to true and very importantly call UpdateLayout(), after the loop, set the selected index back to what it was originally. this will work perfectly with validation summary.

personally i still prefer using validation summary, as it gives you access to the invalid UI control. in our implementation, when user clicks on any error displayed in validation summary, it will navigate bottom up from that invalid control to top node. on navigating up, select containing tab, expand containing expander, scroll to that invalid control if in scrollviewer and so on, which means it can take user right to that invalid control and have it focused.

[hwsoderlund]

I did not know that about the validationsummary. That is a very strong reason for using it. I have not looked at it much, but now I'm thinking I should.

[Alex Fan]

try it, it is awesome. relying on the binding validation error bubble event, it acts like an error aggregator for your entire page. and you get this for free:)

[s2uiguy]

Alex Fan - I know this was a while ago but I'm bumping into the same problem that you did originally and I tried doing what you mentioned (i.e. looping through the tab items and setting each item IsSelected to true and then call UpdateLayout on the tabcontrol).  However I had implemented this in the code behind within the tabcontrol's loaded event and it doesn't seem to be working.  You mentioned using a Behavior.  Could you possibly share some of the code that you used to solve this issue?
Thanks for any help you can give.

[Alex Fan]

Hi, hope following is hopeful :P

public class LoadAllTabBehavior : Behavior<RadTabControl>
{
    protected override void OnAttached()
    {
        base.OnAttached();
        AssociatedObject.Loaded +=
            (s, e) =>
                {
                    var tabControl = AssociatedObject;
                    var orgIndex = tabControl.SelectedIndex;
                    foreach (RadTabItem item in tabControl.Items)
                    {
                        if (item.IsSelected)
                        {
                            continue;
                        }
                        item.IsSelected = true;
                        tabControl.UpdateLayout();
                    }
                    tabControl.SelectedIndex = orgIndex;
                };
    }
}

[Alex Fan]

please note that we are using 2010 version telerik, so I won't be surprised if this whole approach doesn't work.

[s2uiguy]

Thanks Alex for such a quick response.  We are using Silverlight 4, Q3 2011 controls from Telerik so I will post an update if we can get it working or not.  Thanks so much for the help.

[s2uiguy]

Alex Fan - sorry to bother you again.  It sounds like you've accomplished exactly what we would like to do so that's why I'm bothering you! :)

So I did add your behavior (thank you!) and the OnAttached method gets call for the tab control and steps through the various tabs sets the IsSelected property, updates the layout etc.  BUT the validation errors on the non-selected tabs never make it to the ValidationSummary.

You mentioned that this may not work with the version of Telerik controls we are using.  Could you explain why you thought this might be the case?  I'm trying to get an understanding of why this may not be working and you may be aware of some Telerik changes with the RadControls that would prevent your workaround from working now...

Thanks so much!

[Alex Fan]

ValidationSummary control is relying on validation bubble event fired by your view model via binding. Once fired, this bubble event goes up through visual tree to your validationsummary control eventually. The problem here is that radtabcontrol doesn't create views for non-selected tabs, so validation bubble event has no path to travel but to be ignored.

What that behavior is doing to fix the problem is that it forces tabcontrol to create view (by calling UpdateLayout()) for each tab then jump back to original tab. But whether calling UpdateLayout will forces tabcontrol to do this whole thing is up to the internal implementation of tabcontrol. in your version, it is a typical example because it doesn't work.