This is a migrated thread and some comments may be shown as answers.

Kendo UI Initalization of Controls Showing Visible Flicker To Users - Is it possible to hide a div until Kendo is done styling controls?

2 Answers 215 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
jgill
Top achievements
Rank 1
jgill asked on 07 Oct 2012, 01:43 AM
Hello,
We're having a slight issue where when a page loads it displays controls momentarily as the unstyled versions of Kendo UI controls even in development (e.g. no network latency to load resources).  This seems to be a FireFox issue as Chrome is not showing the delay, but it is certainly there in FF 15.0.1.

When the page loads the controls are unstyled, then they are styled.  Is it possible to hook into some Kendo or jQuery framework event to know when Kendo thinks it is done initializing and styling all Kendo controls on the page (or maybe we can look at the last control on the page and base it off that).  We are wanting to prevent this flicker of unstyled to styled controls.


The style initialization we are doing is below: 
  $('#something).kendoNumericTextBox({
            format: "n0",
            spinners: false,
            decimals: 0
        });

2 Answers, 1 is accepted

Sort by
0
jgill
Top achievements
Rank 1
answered on 07 Oct 2012, 02:25 AM
The strange thing is this flickering goes away if I disable caching in FireFox for the page, since Firefox caches differently than Chrome and IE for instance.
0
Dimo
Telerik team
answered on 08 Oct 2012, 11:53 AM
Hi Jonathan,

You can hide a parent element of the Kendo UI widgets and show it with a Javascript statement that is below all Kendo UI initialization statements. Generally there is no need for specific event (there is no such event anyway). Since the Kendo UI widgets are initiliazed in document.ready, the parent showing must also be wrapped in such a statement.

Please use a visibility:hidden style, not display:none. The latter can lead to layout problems, because Javascript size calculations do not work in that case. And finally - the visibility:hidden style itself should be applied with Javascript, otherwise users with disabled Javascript will see nothing.

Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
General Discussions
Asked by
jgill
Top achievements
Rank 1
Answers by
jgill
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or