DHTMLX Docs & Samples Explorer

Text direction (LTR & 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:



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>
<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>