Last time we shared the information about how you can dock / undock cells in accordion and layout. The next feature we are going to review is an ability to display progress bar in cells.
Progress bar is a state indicator used to show the users that some action (for example, data loading) is currently in progress and other actions with this cell are disabled.
To make it work, you need to call the appropriate API method:
dhxComponent.cells(id).progressOn();
// turning progress off
dhxComponent.cells(id).progressOff();
In the following example we place the progressOn() call before loading data in some component, and progressOff() in data loading callback:
var myGrid;
// init layout and attach grid
function initControls() {
myLayout = new dhtmlXLayoutObject({
parent: "layoutObj",
pattern: "2U"
});
myGrid = myLayout.cells("a").attachGrid();
loadGridData(true);
}
// load/reload grid data
function loadGridData(firstLoad) {
mylayout.cells("a").progressOn();
if (firstLoad == true) {
myGrid.load("server.php", doOnGridLoaded);
} else {
myGrid.updateFromXML("server.php", true, false, doOnGridLoaded);
}
}
// grid dataload callback
function doOnGridLoaded() {
myLayout.cells("a").progressOff();
}
<body onload="initControls();">
<div id="layoutObj" style="width: 600px; height: 400px;"></div>
<input type="button" value="refresh grid" onclick="loadGridData();"></div>
</body>
When clicking on the button, the loadGridData() method will be called and you will see the progress of loading over the cell with grid.
Check this article in documentation. Feel free to leave comments and ask your questions