Dynamic loading of sub items

You can set functions called before and after opening node

THIS PAGE CONTAINS SAMPLE FUNCTIONALITY OF PROFESSIONAL EDITION FOR DEMONSTRATION PURPOSE ONLY.
UNAUTHORIZED USE IS PROHIBITED. PLEASE CONTACT SALES@DHTMLX.COM TO OBTAIN A LEGAL COPY OF PROFESSIONAL EDITION.

Source

<link rel="STYLESHEET" type="text/css" href="../../../dhtmlxGrid/codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../../../dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<script  src="../../../dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
<script  src="../../../dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
<script  src="../../../dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
<script  src="../../codebase/dhtmlxtreegrid.js"></script>
 
 
 
 
<table width="680">
    <tr>
        <td>
            <div id="gridbox" width="100%" height="248px" style="background-color:white;"></div>
        </td>
        <td width="100px"><div id='a111'></div></td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
</table>
 
<script>mygrid = new dhtmlXGridObject('gridbox');
mygrid.selMultiRows = true;
mygrid.imgURL = "../../../dhtmlxGrid/codebase/imgs/icons_greenfolders/";
mygrid.setHeader("Tree,Plain Text,Long Text,Color,Checkbox");
mygrid.setInitWidths("150,100,100,100,100");
mygrid.setColAlign("left,left,left,left,center");
mygrid.setColTypes("tree,ed,txt,ch,ch");
mygrid.setColSorting("str,str,str,na,str");
mygrid.attachEvent("onOpenStart", function(id, m) {
    return confirm("Row " + id + "will be " + (m == 1 ? "closed": "opened"));
});
mygrid.attachEvent("onOpenEnd", function(id, m) {
    document.getElementById("a111").innerHTML = "<br/>Row " + id + "was " + (m == -1 ? "closed": "opened");
});
mygrid.init();
mygrid.setSkin("dhx_skyblue");
mygrid.kidsXmlFile = "php/treeGrid_dynamic.php";
mygrid.loadXML("php/treeGrid_dynamic.php");</script>