RTL direction for JQWidgets Tree 90% did need small help.

**zohaib82** · Jan 16, 2013 03:09

1.JPG 2.JPGHi,

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.

Code:

<!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">
<head>
    <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>
</head>
<body>

        <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.
                dataAdapter.dataBind();
                // 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 () {
				$('#jqxWidget').jqxTree('expandAll');
				});
				
				// Collapse All
				$('#CollapseAll').click(function () {
				$('#jqxWidget').jqxTree('collapseAll');
				});
				
				$('#jqxWidget').bind('select', function (event) {
					var htmlElement = event.args.element;
					var item = $('#jqxWidget').jqxTree('getItem', htmlElement);
					var parentId = item.parentId;
					document.getElementById("childID").value=event.args.element.id;
                	$("#parentID").html("<div style='margin: 10px;'>" + parentId + "</div>");
				});
				$('#jqxWidget').jqxTree('selectItem', $("#jqxWidget").jqxTree('expandAll'));
            });
        </script>
		<div id='jqxWidget' dir="rtl">
		</div>
	<br />
</body>
</html>

- Thanks
Zohaib.

**ralph.m** · Jan 16, 2013 06:06

Yep, a live link would be good.

**zohaib82** · Jan 16, 2013 08:07

Hi,

Following is the link to download example with required files.

https://www.dropbox.com/s/vqpbn7reb1...jqxTreeRTL.zip

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