RTL direction for JQWidgets Tree 90% did need small help


I am using JQWidgets tree and make it working from right to left direction.

I got success by creating custom css file “jsontree.css” and small change in “jqxtree.js” file.

The problem is when root node collapses all nodes then it moves tree slightly to left direction.

I will provide link to download all files with example in this post or next post.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <title id='Description'>JSON data.</title>
    <link rel="stylesheet" href="jqwidgets2/styles/jsontree.css" type="text/css" />
    <script type="text/javascript" src="jqwidgets2/scripts/gettheme.js"></script>
    <script type="text/javascript" src="jqwidgets2/scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets2/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets2/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets2/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets2/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets2/jqxpanel.js"></script>
    <script type="text/javascript" src="jqwidgets2/jqxtree.js"></script>
	<script type="text/javascript" src="jqwidgets2/jqxexpander.js"></script>
    <script type="text/javascript" src="jqwidgets2/jqxsplitter.js"></script>

        <script type="text/javascript">
            $(document).ready(function () {

                var theme = getTheme();
				/*var data = <%=data%>*/
				var data = [
					{'id':'-1','parentid':'1','text':'root' },
					{'id':'2','parentid':'-1','text':'Menu1','subMenuWidth':'250px' },
					{'id':'2','parentid':'-1','text':'Menu1 Child1 ' },
					{'id':'3','parentid':'2','text':'Menu1 Child1' },
					{'id':'4','parentid':'2','text':'Menu1 Child2' },
					{'id':'6','parentid':'-1','text':'Menu2','subMenuWidth':'250px' },
					{'id':'6','parentid':'-1','text':'Menu2 Child1' },
					{'id':'7','parentid':'6','text':'Menu2 Child2' },
					{'id':'8','parentid':'6','text':'Menu2 Child3' },
					{'id':'9','parentid':'6','text':'Menu2 Child4' },
					{'id':'10','parentid':'6','text':'Menu2 Child5' },
					{'id':'11','parentid':'6','text':'Menu2 Child6' },
					{'id':'12','parentid':'-1','text':'Menu3','subMenuWidth':'250px' },
					{'id':'12','parentid':'-1','text':'Menu3' },
					{'id':'13','parentid':'12','text':'Menu3 Child1' },
					{'id':'15','parentid':'12','text':'Menu3 Child1 - Child1' },
					{'id':'16','parentid':'12','text':'Menu3 Child1 - Child2' },
					{'id':'17','parentid':'-1','text':'menu4','subMenuWidth':'250px' },
					{'id':'18','parentid':'17','text':'Menu4 Child1' },
                // prepare the data
                var source =
                    datatype: "json",
                    datafields: [
                        { name: 'id' },
                        { name: 'parentid' },
                        { name: 'text' }
                    id: 'id',
                    localdata: data

                // create data adapter.
                var dataAdapter = new $.jqx.dataAdapter(source);

                // perform Data Binding.
                // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents
                // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter
                // specifies the mapping between the 'text' and 'label' fields.
                var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
                $('#jqxWidget').jqxTree({ source: records, width: '300px', theme: theme });
				// Expand All
				$('#ExpandAll').click(function () {
				// Collapse All
				$('#CollapseAll').click(function () {
				$('#jqxWidget').bind('select', function (event) {
					var htmlElement = event.args.element;
					var item = $('#jqxWidget').jqxTree('getItem', htmlElement);
					var parentId = item.parentId;
                	$("#parentID").html("<div style='margin: 10px;'>" + parentId + "</div>");
				$('#jqxWidget').jqxTree('selectItem', $("#jqxWidget").jqxTree('expandAll'));
		<div id='jqxWidget' dir="rtl">
	<br />

  • Thanks

Yep, a live link would be good. :slight_smile:


Following is the link to download example with required files.


Please let me know in case any problem in downloading example zip file.

Also please note problem exists in Internet Explorer and Firefox not in Chrome.

  • Thanks

Try adding the following:


That seems to fix the closed position but there still seems to be a slight jog back and forth when clicked.

Hi Paul,

It is working with little problem that it moves little and come back to original position.