Grid Loading -- Offering notification while data loads

Hi all



I have a grid I use in tree grid



Everything works well, expect when the grid gets a nice chunk of data it gets slower…



I can handle that however, what I would like to do is when someone opens the page with the grid, it tells them on the screen somewhere to please wait…



Once the grid goes to show on the screen, the please wait message would go away and the data would be loaded.



concept is easy, just not sure of the approach with dhtmlx software. I can’t use frames etc to check for session updates etc to process it so something native to your software would be ideal



Thanks in advance on this



James

It is possible by using onXLE | onXLS events

Please check
    dhtmlx.com/docs/products/kb/ … es&s=onXLS




I have tried adding but I don’t see it being shown before the grid data



 



Below is where I added it to my JS file …



 



I have made it bold etc for easier viewing…



 



James



 



function buildGrid(){



//set grid parameters



mygrid.selMultiRows = true;



mygrid.setImagePath("…/…/images/grid/");



var flds = “<img src=”/modules/messages/images/paperclip.gif">,<img src="/modules/messages/images/items.gif">,From,Subject,Received";



mygrid.setHeader(flds);



mygrid.setInitWidths(“15,20,150,*,180”)



mygrid.setColAlign(“left,left,left,left,left”)



mygrid.setColTypes(“ed,ed,ed,ed,ed”);



mygrid.setColSorting(“str,str,str,str,str”)



mygrid.setColumnColor("#ffffff,#ffffff,#ffffff,#ffffff,#ffffff")



mygrid.enableDragAndDrop(false);



mygrid.enableEditEvents(false,false,false,false,false); //Disables doubleclick edit ability in grid



//start grid



mygrid.init();



mygrid.attachEvent(“onXLS”,function(){



//show loading message here



document.write(“testing”);



})



mygrid.attachEvent(“onXLE”,function(){



//hide loading message here



})



mygrid.loadXML("…/…/modules/messages/gridxml.php");



 



 



mygrid.treeToGridElement = function(treeObj,treeNodeId,gridRowId){



return [0,treeObj.getItemText(treeNodeId)];



}



//redefine grid-to-tree drop element



mygrid.gridToTreeElement = function(treeObj,treeNodeId,gridRowId){



return this.cells(gridRowId,1).getValue()+""+this.cells(gridRowId,2).getValue();



}



 



mygrid.rowToDragElement = function (id){



if(this.cells(id,2).getValue()!="")



return this.cells(id,2).getValue()+""+this.cells(id,1).getValue();



return this.cells(id,1).getValue();



}

document.write is not the best technique here, the method will be called after document rendered so result of such operation is not predictable, more safe approach - use already existing container.


Loading …





mygrid.attachEvent(“onXLS”,function(){


    document.getElementById(‘message’).style.display=‘block’;



})



mygrid.attachEvent(“onXLE”,function(){



    document.getElementById(‘message’).style.display=‘block’;



})