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

3 posts, 0 answers
  1. jgill
    jgill avatar
    116 posts
    Member since:
    Jul 2005

    Posted 06 Oct 2012 Link to this post

    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. jgill
    jgill avatar
    116 posts
    Member since:
    Jul 2005

    Posted 06 Oct 2012 Link to this post

    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.
  3. Dimo
    Admin
    Dimo avatar
    8478 posts

    Posted 08 Oct 2012 Link to this post

    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!
Back to Top