DHTMLX Docs & Samples Explorer
All components
dhtmlxTree
Appearance

Specific top offset

View page source

There is a functionality in the tree which allows you to adjust the distance between the selected node and its superior one. To achieve this you should select an item in the tree, set the size of distance in boxe and then click on the action link.

 Set top offset of selected item
Specific top offset can be set from xml - "topoffset" atribute or by the tree.setItemTopOffset method.

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="../../codebase/dhtmlxtree.css">
<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxtree.js"></script>
 
 
<table>
    <tr>
        <td>
            <div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;"></div>
        </td>
        <td rowspan="2" style="padding-left:25" valign="top">
            <a href="#" onClick="tree.setItemTopOffset(tree.getSelectedItemId(),this.nextSibling.value);">Set top offset of selected item</a><input value='20px'><br>
        </td>
    </tr>
</table>
Specific top offset can be set from xml - "topoffset" atribute or by the tree.setItemTopOffset method.
<script>
tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);
 
tree.setSkin('dhx_skyblue');
tree.setImagePath("../../codebase/imgs/csh_bluebooks/");
tree.enableSmartXMLParsing(true);
tree.enableCheckBoxes(true);
tree.enableDragAndDrop(true);
tree.enableThreeStateCheckboxes(true);
tree.loadXML("../common/tree_to.xml");
</script>
<br><br>
Copyright © 1998-2011 DHTMLX LTD.
All rights reserved.