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"},...

]