SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    1.JPG2.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.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Yep, a live link would be good.

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    Try adding the following:

    Code:
    .jqx-widget-content{right:0;}
    That seems to fix the closed position but there still seems to be a slight jog back and forth when clicked.

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

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




    -Thanks
    Zohaib


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •