DHTMLX Docs & Samples Explorer

Tree related API

Use script methods to manipulate TreeGrid

Tree
Plain Text
Long Text
Color
Checkbox
setItemText
getItemText

set Item Non-Closeable
set Item Closeable

openItem
closeItem
getOpenState

getParentId
getLevel

hasChildren
getSubItems
getAllSubItems

getChildItemIdByIndex (first child of selected item)
deleteChildItems

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>