DHTMLX Grid reloading data

Handy function to reload data in grid

mygrid.reloadPage = function() {
this.load(this.xmlFileUrl + getUrlSymbol(this.xmlFileUrl) + "posStart=" +
((this.currentPage-1)*this.rowsBufferOutSize) + "&count=" + this.rowsBufferOutSize, this._data_type);
}

DHTMLX Grid attachHeader and attachFooter

DHTMLX Grid is very strict on height setting.
If you ever attachHeader or attachFooter, always remember to set the height of the column you are adding using style="height:30px".

After setting, running:
grid.setSizes();
grid.callEvent("onGridReconstructed", []);

This above also applies to subgrid

DHTMLXGrid subgrid paging

To create paging in subgrid, one must create a row in the table.
The example below put up paging as footer.
The enablePaging should only be call when loading data.
This is because the grid is not created yet, therefore the div did not exists yet.


mygrid.attachEvent("onSubGridCreated",function(subgrid, id){
//collapse all other subgrid
subgrid.setHeader("#master_checkbox,Id,Name,Age");
subgrid.setColTypes("ch,ro,ro,ro");
subgrid.setInitWidths("40,50,100,100");
subgrid.init();
subgrid.enableAutoHeight(true);
//notice the div is given the unique id
//the trailing #cspan to set colspan of the other column to merge with 1st column
// therefore, the #cspan have to match your column count-1
subgrid.attachFooter("<div id="subgrid_h" + id + "" style="width:100%;"></div><div id="subgrid_f" + siteid + "" style="width:100%; height: 20px;"></div>,#cspan,#cspan,#cspan");

subgrid.load("http://example.com/path_tojson?count=10&posStart=0&siteid=" + siteid,function() {
subgrid.enablePaging(true, 10, 10, "subgrid_h" + siteid, true, "subgrid_f" + siteid);
subgrid.setPagingSkin("bricks");
subgrid.setSizes();
subgrid.callEvent("onGridReconstructed", []);
}, "json");

return false; // block default behavior
});

DHTMLX Grid subgrid

Example of Grid with subgrid support with JSON data:

//=====Main grid======//

mygrid = new dhtmlXGridObject('divGridForm');

mygrid.setImagePath("imgs/");

//setting header row, notice 2nd column is a "check-all" checkbox

mygrid.setHeader(["","#master_checkbox","id","name");

mygrid.setInitWidths("30,40,50,100);

mygrid.setColAlign("center,center,left,right");

//expander symbol, checkbox, read-only field,...

mygrid.setColTypes("sub_row_grid,ch,ro,ro");

//setting sortable columns, notice 1st 2 columns is empty to disable sorting

mygrid.setColSorting(",,str,str");

mygrid.enablePaging(true, iLimit, 10, "pagingArea", true, "recinfoArea");

mygrid.setPagingSkin("bricks");

mygrid.load("http://example.com/pathtojson", "json");

//Main grid row double clickevent

mygrid.attachEvent("onRowDblClicked", function(rId,cInd){

//do something

});

//====Sub grid load on created====//

mygrid.attachEvent("onSubGridCreated",function(subgrid, id){

//collapse all other subgrid

//notice hiding column #2

subgrid.setHeader("#master_checkbox,,Industry,Advertiser");

//notice chekbox @ column #1

subgrid.setColTypes("ch,ro,ro");

subgrid.setInitWidths("40,0,100,100");

subgrid.init();

subgrid.load("http://example.com/path_tosubgrid_json" + id,function() {

//call to reload subgrid height

subgrid.setSizes();

subgrid.callEvent("onGridReconstructed", []);

}, "json");

return false; // block default behavior

});

//updates dec 19: this can be done by calling mygrid.getCheckedRows(0);

//overriding method to get all checkbox ticked in main grid

mygrid.getSelectedRows = function() {

var aResult = [];

this.forEachRow(function(id){

var cell=this.cells(id,0);

if (cell.isCheckbox() && cell.getValue()==1) {

aResult[aResult.length] = id;

}

});

return aResult;

}

//===to reload data of a page

mygrid.rowsBuffer = dhtmlxArray();

mygrid.changePage(this.currentPage);

//===to only allow expand of 1 subgrid

//if expand row

mygrid.attachEvent("onSubRowOpen", function(expandId, status) {

if (status) {

mygrid.forEachRow(function(id){

if (id!=expandId) {

mygrid.cells(id, 0).close();

}

});

}

});

//=== for custom sorting===//

mygrid.attachEvent("onBeforeSorting",function(ind,type,direction){

var iLimit = 10; //limit records / page

var sSortDir = direction;

var sSortBy = aRawCols[ind];

var iOffset = (mygrid.currentPage-1)*iLimit;

var sNewURL = "http://example.com/path_to_json_loader?&count=" + iLimit + "&posStart=" + iOffset + "&dir="+sSortDir+"&sort="+sSortBy;

mygrid.load(sNewURL, "json");

this.setSortImgState(true,ind,direction);//set a correct sorting image

return false;

});

Please note that, dhtmlxgrid loading behaviour is rather, "special case".

Most Grid will load data, and assume the data return is starting on index 0 from offset pass in,

but somehow, it skipped the records up to offset before collecting data for the new page.

even with posStart=2, your json data has to return postData of emty array of 2 before appending actual row of data.

Example:

[

[],[], {id:3, name: "xxx"},...

]

Grid with sub grid

Working with ExtJS grid was kind of cool. But if you need to have another grid within the grid, the Grid selection, checkbox and expand column become hair wire on ExtJS.
I've tried several ways, but some how given up on it. Hope fully ExtJS 3.4 or higher could see the light on this feature...

After searching around, DHTMLXGrid did serve the purpose pretty well.
But the documentation is a bit confusing, need a bit of digging on the doc and the code in order to configure things up to what you might need.

Reference:
+ http://docs.dhtmlx.com/doku.php?id=dhtmlxgrid:api_toc_alpha