Text direction (LTR & RTL)


Tree 1 - LTR Tree 1 - RTL	Tree 2 - LTR Tree 2 - RTL

dhtmlxTree supports both LTR and RTL text directions. LTR is set in the tree by default. To set RTL you should set the tree.enableRTL() method to true, as it is mentioned below:

Source

<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtree.css">
<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxtree.js"></script>
<script  src="../../codebase/ext/dhtmlxtree_rl.js"></script>
 
<table>
    <tr>
        <td>
            <div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;overflow:hidden;"/>
        </td>
        <td style="padding-left:25" valign="top">
            <div id="treeboxbox_tree2" style=" width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;overflow:hidden;"/>
        </td>
    </tr>
    <tr>
        <td>
<div><a href="#" onClick="tree.enableRTL(false)">Tree 1 - LTR</a></div>
<div><a href="#" onClick="tree.enableRTL(true)">Tree 1 - RTL</a></div>
</td>
<td style="padding-left:25">
<div><a href="#" onClick="tree2.enableRTL(false)">Tree 2 - LTR</a></div>
<div><a href="#" onClick="tree2.enableRTL(true)">Tree 2 - RTL</a></div>
</td>
    </tr>
</table>
 
 
<script>tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);
tree.setSkin('dhx_skyblue');
tree.setImagePath("../../codebase/imgs/csh_bluebooks/");
tree.enableDragAndDrop(true);
tree.enableSmartXMLParsing(true);
tree.loadXML("../common/tree3.xml");
tree2 = new dhtmlXTreeObject("treeboxbox_tree2", "100%", "100%", 0);
 
tree2.setSkin('dhx_skyblue');
tree2.setImagePath("../../codebase/imgs/csh_bluebooks/");
tree2.enableSmartXMLParsing(true);
tree2.enableDragAndDrop(true);
tree2.setDragBehavior("sibling");
tree2.enableRTL(true);
tree2.loadXML("../common/tree3.xml");</script>
<br><br>