Delay in showing dropdownlists and buttons on page load

[Paul J]

I just put a RadFormDecorator control on my Master Page and have it styling ONLY CheckBoxes and RadioButtons. But now, when the page loads there is an obvious and annoying delay before all buttons and drop down lists are displayed. Textboxes and other form controls show display immediately. I've not using the decorator tool to style the dropdownlists nor the buttons, so why the delay? The demos do not seem to have this delay? Is there a fix or similar for this behavior? I'm using version 2010.1.519.20

[Paul J]

And, in the case that this cannot be fixed, where can I find the exact images and CSS for the Telerik skin that the form decorator uses to style checkboxes and radiobuttons? As I may look to other options for applying the styling that will not cause this delay. Thanks.

[Georgi Tunev]

Hi Paul J,

I just answered your support ticket on the same subject. For convenience I am pasting my reply below.

This behavior is expected - it is the way RadFormDecorator works.The research that we did, when we started working on RadFormDecorator, show that from a customers' point of view, it is better to have all elements (that can be decorated) initially hidden and then, when the decoration mechanism finish its work, shown on the page at the same time. In the other case, users will see "flickering" in the parts of the page where the decorator styles the controls. For example, if you have a page full of columns with checkboxes and you want to decorate only the first column, once the page is loaded, the users will see how the first column flickers while being decorated. The showing of the decorated controls can indeed be slow during the initial load because in ASP.NET AJAX, the Ajax controls (including ours) are created and initialized after the page has been loaded (in Sys.Application.Load). This delay is more visible on pages with a lot of controls on them - our RadFormDecorator demos do not have many controls on the same page and that is why the loading there seems fast.

We have implemented many hacks in RadFormDecorator that help us produce (in most cases) consistent behavior with different browsers, however there are cases where this cannot be achieved due to limitations in CSS support and client rendering. Again in some scenarios we managed to improve the situation - for example the styling of the controls in Firefox is done entirely with CSS which speeds up the process, but due to browser's limitations we have to use JavaScript with IE. Unfortunately it is virtually impossible to cover all scenarios with any browser.


Sincerely yours,
Georgi Tunev
the Telerik team

[Paul J]

Thanks for the  in-depth answer. Quick question then: why not just initially hide ONLY the controls the FormDecorator is told to style and initially show the rest of the controls that the user does not want the formdecorator to touch? That's really what I was asking in my post. I'm specifically telling it to style only radio buttons and checkboxes, so obviously, I can understand why these may be hidden until styled, but why then hide the buttons, the dropdowns, textboxes, etc, when the formdecorator should not be touching these controls in the first place?

By hiding ALL controls no matter if the formdecorator is told to style them or not, it greatly increases the noticability of the delay to the user. Since, in my case, I'm only actually styling some checkboxes within a radGrid, it would be far better if ONLY the checkboxes were hidden, instead of all my controls on the page. i.e. I have multiple texboxes, dropdowns and a couple buttons on the page, but I'm not having the decorate style them, yet they all get hidden as well.

Also, you did not bother to asnwer my other question:
Where may I find the resources (CSS, images, tags, etc.) for each skin for checkboxes and radio buttons that the formdecorate uses? I may experiment with other form decorating options that are out there that do not cause such "delay" issues.

[Georgi Tunev]

Hello Paul J,

This is needed because of the way RadFormDecorator works. When the page is loaded, we hide all controls that can be decorated because for most of them we need to apply a common style to the page itself. There is no check for what controls should be decorated because this would slow the process even more and the flickering will become more obvious.

I apologize for missing your last question. You can find detailed information about RadFormDecorator's skins in these help topics:
http://www.telerik.com/help/aspnet-ajax/radformdecorator-creating-custom-skins.html
http://www.telerik.com/help/aspnet-ajax/formdecorator-css-classes.html
The resources (images and CSS) are available in the Skins folder of your RadControls installation folder.


Best wishes,
Georgi Tunev
the Telerik team