Hi,
What is the best way to go about initializing many kendoUI widgets on a single page without the browser flashing the code html before rendering the widget?
Below is a simplification of my page structure.
thanks in advance,
Grant
<html> <head> <!-- Script imports --> <script type="text/javascript"> $(function() { //1. Initialize Grid DataSource //2. Initialize Grid //3. Initialize view Window //4. Initialize form Window //5. Initialize 3-4 buttons //6/ Initialize kendo validator }); </script> </head> <body> <div id="grid"></div> <div id="window-view"></div> <div id="window-form"></div> </body></html>1 Answer, 1 is accepted
Hi Grant,
It is expected that unstyled HTML may be shown while stylesheets and scripts are being downloaded and while widgets are initializing.
Perhaps you can consider adding some overlay div element in the page markup (perhaps with inilne styles) that will hide the page until everything is done.
Then, adding stylesheets first, then scripts, and initializing Kendo widgets in $(document).ready should provide the shortest time to having fully styled widgets on the page.
Another option is to hide all the content, initialize the widgets in invisible containers and then call their resize() method. Note, that this may lead to some issues and I would not recommend this in general: http://docs.telerik.com/kendo-ui/troubleshoot/troubleshooting-common-issues#incorrect-appearance-or-errors-occur-in-hidden-widgets.
Regards,
Telerik by Progress