Hi,
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">
<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.
