Start Building Professional
Web Apps Today

Attach a div on top of another object for loading

I am wondering if it is possible to use attachObject() to attach a DIV "on top of" another object, say attachGrid()?? I want to have a div that appears when XML data is being loaded, so something like

<div id="loadingdiv" style="display:none;"></div>

<script>
grid1 = dhxLayout.cells("a").attachGrid();
dhxLayout.cells("a").attachObject("loadingdiv");

grid1.attachEvent("onXLS",function(){
loadingdiv.style.display="block";
});

grid1.attachEvent("onXLE",function(){
loadingdiv.style.display="hidden";
});
</script>

But it crashes right after I attach the second object.
Is there an easier alternative? The reason why I was doing it this way is because I want the div to span the container that my grid is in, so my loading picture is completely centered.

Thanks in advance!

Try this way:

grid1 = dhxLayout.cells("a").attachGrid();

//dhxLayout.cells("a").attachObject("loadingdiv");  // remove this grobaly, it will overwrite existing grid in cell "a"

// attach like this
var layoutCell = dhxLayout.cells("a").window._content.childNodes[2];
layoutCell.insertBefore(document.getElementById("loadingdiv"), layoutCell.childNodes[0]);

The more legal way will be using an inline layout which will consists from the two elemenst : static cell and grid cell. ( same approach shown in layout demo-video )