jQuery UI Widgets › Forums › Navigation › Tree › jqxTree Master Detail
Tagged: checkItem, jqxtree, master-detail, Tree
This topic contains 1 reply, has 2 voices, and was last updated by Nadezhda 9 years, 7 months ago.
-
AuthorjqxTree Master Detail Posts
-
Hello.
Trying to create a master/detail on two jqxTree widgets. This is based off jqxGrid master/detail.
After clicking the maste, I only ever see the value “item” appear in the detail tree.
Can someone please take a look and guide me how to resolve?
var dataMaster = [{ "id": "1", "text": "Purchased" }, { "id": "2", "text": "Sold" }, { "id": "3", "text": "Tag1" }] // prepare the data var sourceMaster = { datatype: "json", datafields: [ { name: 'id' }, { name: 'icon' }, { name: 'text' } ], id: 'id', localdata: dataMaster }; // create data adapter. var dataAdapterMaster = new $.jqx.dataAdapter(sourceMaster); // perform Data Binding. dataAdapterMaster.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 recordsMaster = dataAdapterMaster.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]); $('#jqxTreeMaster').jqxTree({ source: recordsMaster, // the following line is to suppress the Tree' horizontal scrollbar from appearing width: '99%', // the following line is to suppress the Tree' vertical scrollbar from appearing height: 'auto', checkboxes: true }); var dataDetail = [{ "id": "1", "parentid": "-1", "masterID": "1", "text": "detail related to master 1", "icon": "(~mcIMG~)/mailIcon.png" }, { "id": "2", "parentid": "-1", "masterID": "2", "text": "detail related to master 2", "icon": "(~mcIMG~)/mailIcon.png" }, { "id": "3", "parentid": "-1", "masterID": "3", "text": "detail related to master 3", "icon": "(~mcIMG~)/mailIcon.png" }] // prepare the data var sourceDetail = { datatype: "json", datafields: [ { name: 'id' }, { name: 'icon' }, { name: 'masterID' }, { name: 'text' }, { name: 'value' } ], id: 'id', localdata: dataDetail}; // create data adapter. var dataAdapterDetail = new $.jqx.dataAdapter(sourceDetail); // perform Data Binding. dataAdapterDetail.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 recordsDetail = dataAdapterDetail.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]); $('#jqxTreeDetail').jqxTree({ source: recordsDetail, // the following line is to suppress the Tree' horizontal scrollbar from appearing width: '99%', // the following line is to suppress the Tree' vertical scrollbar from appearing height: '99%', allowDrag: true }); ////// $("#jqxTreeDetail").on('checkChange', function (event) { var str = ""; var items = $(this).jqxTree('getCheckedItems'); for (var i = 0; i < items.length; i++) { var item = items[i]; str += item.id + ","; console.log("The checked items are " + str); var records = new Array(); var length = dataAdapterDetail.records.length; alert('length='+length); for (var i = 0; i < length; i++) { var record = dataAdapterDetail.records[i]; alert(record.id); if (record.id == item.id) { alert('got one'); records[records.length] = record; } } var dataSource = { localdata: records } var adapter = new $.jqx.dataAdapter(dataSource); adapter.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 = adapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]); // update data source. $("#jqxTreeDetail").jqxTree({ source: adapter }); } });
Hello jqwidgetsdev,
You have changed the position of trees id selectors. Please, find the following example where the tree position should be correct and check for other incompatibilities.
<!DOCTYPE html> <html lang="en"> <head> <title></title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript"> $(document).ready(function () { var dataMaster = [{ "id": "1", "text": "Purchased" }, { "id": "2", "text": "Sold" }, { "id": "3", "text": "Tag1" }] // prepare the data var sourceMaster = { datatype: "json", datafields: [ { name: 'id' }, { name: 'icon' }, { name: 'text' } ], id: 'id', localdata: dataMaster }; // create data adapter. var dataAdapterMaster = new $.jqx.dataAdapter(sourceMaster); // perform Data Binding. dataAdapterMaster.dataBind(); var recordsMaster = dataAdapterMaster.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }]); $('#jqxTreeMaster').jqxTree({ source: recordsMaster, // the following line is to suppress the Tree' horizontal scrollbar from appearing width: '99%', // the following line is to suppress the Tree' vertical scrollbar from appearing height: 'auto', checkboxes: true }); var dataDetail = [{ "id": "1", "parentid": "-1", "masterID": "1", "text": "detail related to master 1", "icon": "(~mcIMG~)/mailIcon.png" }, { "id": "2", "parentid": "-1", "masterID": "2", "text": "detail related to master 2", "icon": "(~mcIMG~)/mailIcon.png" }, { "id": "3", "parentid": "-1", "masterID": "3", "text": "detail related to master 3", "icon": "(~mcIMG~)/mailIcon.png" }] // prepare the data var sourceDetail = { datatype: "json", datafields: [ { name: 'id' }, { name: 'icon' }, { name: 'masterID' }, { name: 'text' }, { name: 'value' } ], id: 'id', localdata: dataDetail }; // create data adapter. var dataAdapterDetail = new $.jqx.dataAdapter(sourceDetail); // perform Data Binding. dataAdapterDetail.dataBind(); var recordsDetail = dataAdapterDetail.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }]); ////// $("#jqxTreeMaster").on('checkChange', function (event) { var str = ""; var items = $(this).jqxTree('getCheckedItems'); for (var i = 0; i < items.length; i++) { var item = items[i]; str += item.id + ","; console.log("The checked items are " + str); var records = new Array(); var length = dataAdapterDetail.records.length; alert('length=' + length); for (var i = 0; i < length; i++) { var record = dataAdapterDetail.records[i]; alert(record.id); if (record.id == item.id) { alert('got one'); records[records.length] = record; } } var dataSource = { localdata: records } var adapter = new $.jqx.dataAdapter(dataSource); adapter.dataBind(); var records = adapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label' }]); // update data source. $("#jqxTreeDetail").jqxTree({ source: adapter }); } }); $('#jqxTreeDetail').jqxTree({ width: '99%', height: '99%', //allowDrag: true }); $("#jqxTreeMaster").jqxTree('checkItem', $("#government")[0], true); }); </script> </head> <body> <div id='content'> <h3>Tree Master</h3> <div id='jqxTreeMaster'> </div> <h3>Tree Details</h3> <div id='jqxTreeDetail'> </div> </div> </body> </html>
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.