How to place a loading status information on the screen

Discontinued products DHTMLX Touch
#1

Hi:

In my app,there are 9 grid components in carousel ,Each grid’s data was loaded by ajax.So the time of the webpage loading is long,maybe 3 to 5 seconds.during this time,you can only see the white color on the screen.End-user experience is not good.
In order to promote the End-user experience,i want place a ‘gif’ picture on the screen during the webpage loading time.After the page was loaded,the picture will be hidden.

How can i do?

Below is my brief code.

	var grid_F1001 = {
	view:'grid', id:'grid_F1001',select:true,sorting:false,
	 fields:[
	     {
		id:'msu_name',
		label:'msu_name',
		width:170
	     },
	     ...
	 ]
	 ,
	 datatype:"json",
	 url:"myurl.do?getdata=1"
	};

	var grid_F1002 = ...;
	var grid_F1003 = ...;
	var grid_F1004 = ...;
	var grid_F1005 = ...;
	var grid_F1006 = ...;
	var grid_F1007 = ...;
	var grid_F1008 = ...;
	var grid_F1009 = ...;

	dhx.ready(function(){
        dhx.ui.fullScreen();
		dhx.ui({
			view:"window",
			body:{
				view:"carousel",
				id:"carousel",
				cols:[ 
					grid_F1001,grid_F1002,grid_F1003,grid_F1004,grid_F1005,grid_F1006,grid_F1007,grid_F1008,grid_F1009
				],
				panel:{
				   align:"bottom"
				}
									
			 }
		 });

	    });
#2

You can use

dhx.extend($$('grid_F1001'), dhx.ui.overlay); //after that any loading command will trigger wait message overlay $$('grid_F1001').load("some.json");

Also, you can use onXLS and onXLE event of components ( grids ) to catch start and end of loading, to show any other kind of custom message

#3

Hi:
Can you give me an example of the onXLS and onXLE event.
Below is my code,but it doesn’t work.it can’t popup an alert message.

		$$("grid_F1001").attachEvent("onxle",function(){   
			alert('end');
		});
#4

The code which you are using is valid , but be sure that it was called before data loading ( or it can occurs, that data is already loaded in moment of onxle definition )

$$("grid_F1001").attachEvent("onxle",function(){ alert('end'); }); $$("grid_F1001").load("some.json");

#5

Hi:
Can you give me an example about how to use “dhx.ui.overlay”.

dhx.extend($$('grid_F1001'), dhx.ui.overlay);
//after that any loading command will trigger wait message overlay
$$('grid_F1001').load("some.json");
#6

Sample is attached
sample_loading_message.zip (80.8 KB)