Loading screen

Problem

How to add and customize the loading screen?

Solution

When you deal with large data size, it's useful to display the loading screen showing users that the app is actually doing something.
The loading screen is displayed when content is being loaded in the page.

There are 2 ways you can add the loading screen to a component:

  1. By inheriting the 'dhx.ui.overlay' class (applied to all components).


waitMessage parameter

Please note, this parameter is available just for the Template and Iframe components.

To display the loading screen you should just set the parameter waitMessage to true (by default, the screen is hidden):

dhx.ui({ 
         view:"iframe", 
         src:"http://dhtmlx.com", 
         waitMessage:true
})

dhx.ui.overlay class

To add the default loading screen to any component (e.g. to grid containing a big number of records), use the following code:

dhx.extend($$('componentId'), dhx.ui.overlay);
  • Then, to display it, call:

    $$('componentId').showOverlay();
  • And to hide it, call:

    $$('componentId').hideOverlay();

Styling the screen

dhx.ui.overlay is the related css class for the loading screen. It has the following definition:

.dhx_loading_overlay{
	width:100%;
	height:100%;
	background-color:#D6D6D6;
	opacity:0.5;
	background-image:url(./imgs/loading.png);
	background-repeat:no-repeat;
	background-position:center;
}

To customize the screen just redefine the needed attributes in <style> block of your page. The untouched attributes will take default values.

<!DOCTYPE HTML>
<html>
  <head>
	<link rel="stylesheet" href="../../../codebase/touchui.css" type="text/css" media="screen" charset="utf-8">
	<script src="../../../codebase/touchui.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
       <style>
          .dhx_loading_overlay{
	         background-color:#6699FF;
          }
       </style>
   ....
</html>

In the example above we redefined only background color. All the other attributes defined in the '.dhx_loading_overlay' class took the default values.

Related sample: 09_template/02_ajax_content.html