DHTMLX Docs & Samples Explorer

Tree related API

Use script methods to manipulate TreeGrid

setItemText
getItemText

set Item Non-Closeable
set Item Closeable

openItem
closeItem
getOpenState

getParentId
getLevel

hasChildren
getSubItems
getAllSubItems

getChildItemIdByIndex (first child of selected item)
deleteChildItems

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="575">
    <tr>
        <td>
            <div id="gridbox" width="100%" height="150px" style="background-color:white;"></div>
        </td>
    </tr>
    <tr>
        <td>
<table>
    <tr>
    <td width="50%">
            <a href="javascript:mygrid.setItemText(mygrid.getSelectedId(),'new text')">setItemText</a><br>
            <a href="javascript:alert(mygrid.getItemText(mygrid.getSelectedId()))">getItemText</a><br><br>
            <a href="javascript:mygrid.setItemCloseable(mygrid.getSelectedId(),false)">set Item Non-Closeable</a><br>
            <a href="javascript:mygrid.setItemCloseable(mygrid.getSelectedId(),true)">set Item Closeable</a><br><br>
            <a href="javascript:mygrid.openItem(mygrid.getSelectedId())">openItem</a><br>
            <a href="javascript:mygrid.closeItem(mygrid.getSelectedId())">closeItem</a><br>
            <a href="javascript:alert(mygrid.getOpenState(mygrid.getSelectedId()))">getOpenState</a><br><br>
    </td>
    <td>
            <a href="javascript:alert(mygrid.getParentId(mygrid.getSelectedId()))">getParentId</a><br>
            <a href="javascript:alert(mygrid.getLevel(mygrid.getSelectedId()))">getLevel</a><br><br>
 
            <a href="javascript:alert(mygrid.hasChildren(mygrid.getSelectedId()))">hasChildren</a><br>
            <a href="javascript:alert(mygrid.getSubItems(mygrid.getSelectedId()))">getSubItems</a><br>
            <a href="javascript:alert(mygrid.getAllSubItems(mygrid.getSelectedId()))">getAllSubItems</a><br><br>
            <a href="javascript:alert(mygrid.getChildItemIdByIndex(mygrid.getSelectedId(),0))">getChildItemIdByIndex (first child of selected item)</a><br>
            <a href="javascript:mygrid.deleteChildItems(mygrid.getSelectedId())">deleteChildItems</a><br><br>
    </td>
    </tr>
</table>
 
 
        </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.init();
mygrid.setSkin("dhx_skyblue");
mygrid.loadXML("../common/test_list_1.xml");
</script>