jqxTree Master Detail

[jqwidgetsdevParticipant]

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 });
                    }
                });

[NadezhdaParticipant]

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,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts