Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by James Mackinnon on Mar 20, 2008 11:56
open dhtmlx forum
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
Answer posted by Support on Mar 21, 2008 02:51
It is possible by using onXLE | onXLS events

Please check
    http://www.dhtmlx.com/docs/products/kb/index.shtml?cat=search&q=948&ssr=yes&s=onXLS
    http://www.dhtmlx.com/docs/products/kb/index.shtml?cat=search&q=2137&ssr=yes&s=onXLS



Answer posted by James Mackinnon on Mar 21, 2008 07:17

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();

}

Answer posted by Support on Mar 24, 2008 02:33
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.

<div id="message" style='display:none'> Loading ... </div>

mygrid.attachEvent("onXLS",function(){

    document.getElementById('message').style.display='block';

})

mygrid.attachEvent("onXLE",function(){

    document.getElementById('message').style.display='block';

})