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
});

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