Progress Bar

A progress control is a state indicator. It can be used to indicate content loading or updating. While the cell is visually disabled and not accessible for user actions the progress is enabled.

This functionality will not start automatically when some content is loaded into a cell, it needs to be triggered by calling the appropriate API method.

Here is the code for a cell's progress control:

// turning progress on
dhxComponent.cells(id).progressOn();
 
// turning progress off
dhxComponent.cells(id).progressOff();

In practical scenario, you can place the progressOn() call before loading data in some component, and progressOff() in data loading callback, for example:

var myLayout;
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>

Each time you will click the button, the loadGridData() method will be called and you will see the progress of loading over the cell with grid.