jQWidgets Forums

This topic contains 6 replies, has 2 voices, and was last updated by Philippe 11 years, 5 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Master-Details with XML tables not linked Posts

January 5, 2014 at 9:31 am Master-Details with XML tables not linked #47257

Participant

Hi,
Somehow the data between the master and the details grid is not shown.
Below is the code:


<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to implement Master-Details binding scenario with two Grids.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var url = "../sampledata/customers.xml";                                   
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'CustomerID' },
                    { name: 'CompanyName' },
                    { name: 'ContactName' },
                    { name: 'ContactTitle' },
                    { name: 'Address' },
                    { name: 'City' },
                    { name: 'Country' }
                ],
                root: "entry",
                record: "content",
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#customersGrid").jqxGrid(
            {
                width: 670,
                height: 250,
                source: dataAdapter,
                
                keyboardnavigation: false,
                columns: [
                    { text: 'Company Name', datafield: 'CompanyName' },
                    { text: 'Contact Name', datafield: 'ContactName' },
                    { text: 'Contact Title', datafield: 'ContactTitle' },
                    { text: 'City', datafield: 'City'},
                    { text: 'Country', datafield: 'Country' }
                ]
            });

           // prepare the data
            var url = "../sampledata/orders.xml";                                              
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'CustomerID' },
                    { name: 'OrderID' },
                    { name: 'OrderDate' },
                    { name: 'ShippedDate' },
                    { name: 'ShipName' }
                ],
                root: "entry",
                record: "content",
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            dataAdapter.dataBind();

            $("#customersGrid").on('rowselect', function (event) {
                var customerID = event.args.row.CustomerID;
                var records = new Array();
                var length = dataAdapter.records.length;
                for (var i = 0; i < length; i++) {
                    var record = dataAdapter.records[i];
                    if (record.CustomerID == customerID) {
                        records[records.length] = record;
                    }
                }

                var dataSource = {
                    datafields: dataFields,
                    localdata: records
                }
                var adapter = new $.jqx.dataAdapter(dataSource);
        
                // update data source.
                $("#ordersGrid").jqxGrid({ source: adapter });
            });

            $("#ordersGrid").jqxGrid(
            {
                width: 670,
                height: 250,
                keyboardnavigation: false,
                columns: [
                    { text: 'OrderID', datafield: 'OrderID' },
                    { text: 'OrderDate', datafield: 'OrderDate' },
                    { text: 'Shipped Date', datafield: 'ShippedDate' },
                    { text: 'Ship Name', datafield: 'ShipName' }
                ]
            });

            $("#customersGrid").jqxGrid('selectrow', 0);
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <h3>
            Customers</h3>
        <div id="customersGrid">
        </div>
        <h3>
            Orders by Customer</h3>
        <div id="ordersGrid">
        </div>
    </div>
</body>
</html>

How i can get the data of the nested grid?
Thank you.

January 5, 2014 at 3:41 pm Master-Details with XML tables not linked #47260

Peter Stoev

Keymaster

Hi dgp,

1. The provided sample does not use Nested Grids. It is with 2 different Grids.
2. This line $(“#customersGrid”).jqxGrid(‘selectrow’, 0); is called while the customers Grid is not yet initialized. You need to call a method or set a property after the Grid is created and rendered i.e in a “bindingcomplete” handler or in the “ready” callback function of the Grid.
3. The code also does not take into account whether both Data Sources are loaded i.e you may select a row in the Customers Grid while still the Orders data Adapter is not loaded. jqxDataAdapter has “loadComplete” callback function which ensures that the data is loaded.

Best Regards,
Peter Stoev

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

January 7, 2014 at 9:27 am Master-Details with XML tables not linked #47372

Philippe

Participant

Hi Peter,

Thank you for your help.

Indeed, we’re looking for a master-details solution, not nested grid.
As a newbie, I’ve tried to implement your guidelines but without result. The “loadComplete” function has been added after the data sources are loaded. On the other hand, I’m a bit lost with the “bindingcomplete” handler.

In fact, we’re looking for a sample code based on the Master-Details.htm, but linked to a XML data source instead of a local data source.

Could you please have a quick look at the code below and correct the errors?
Your help is much appreciated.

Philippe


<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to implement Master-Details binding scenario with two Grids.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css">
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var url = "../sampledata/customers.xml";                                   
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'CustomerID' },
                    { name: 'CompanyName' },
                    { name: 'ContactName' },
                    { name: 'ContactTitle' },
                    { name: 'Address' },
                    { name: 'City' },
                    { name: 'Country' }
                ],
                root: "entry",
                record: "content",
                url: url
            };
			var dataAdapter = new $.jqx.dataAdapter(source, {
        	    loadComplete: function (data) {}
            });

            $("#customersGrid").jqxGrid(
            {
                width: 670,
                height: 250,
                source: dataAdapter,
                
                keyboardnavigation: false,
                columns: [
                    { text: 'Company Name', datafield: 'CompanyName' },
                    { text: 'Contact Name', datafield: 'ContactName' },
                    { text: 'Contact Title', datafield: 'ContactTitle' },
                    { text: 'City', datafield: 'City'},
                    { text: 'Country', datafield: 'Country' }
                ]
            });

           // prepare the data
            var url = "../sampledata/orders.xml";                                              
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'CustomerID' },
                    { name: 'OrderID' },
                    { name: 'OrderDate' },
                    { name: 'ShippedDate' },
                    { name: 'ShipName' }
                ],
                root: "entry",
                record: "content",
                url: url
            };
			var dataAdapter = new $.jqx.dataAdapter(source, {
        	    loadComplete: function (data) {}
            });
            dataAdapter.dataBind();

            $("#customersGrid").on('rowselect', function (event) {
                var customerID = event.args.row.CustomerID;
                var records = new Array();
                var length = dataAdapter.records.length;
                for (var i = 0; i < length; i++) {
                    var record = dataAdapter.records[i];
                    if (record.CustomerID == customerID) {
                        records[records.length] = record;
                    }
                }

                var dataSource = {
                    datafields: dataFields,
                    localdata: records
                }
                var adapter = new $.jqx.dataAdapter(dataSource);
        
                // update data source.
                $("#ordersGrid").jqxGrid({ source: adapter });
            });

            $("#ordersGrid").jqxGrid(
            {
                width: 670,
                height: 250,
                keyboardnavigation: false,
                columns: [
                    { text: 'OrderID', datafield: 'OrderID' },
                    { text: 'OrderDate', datafield: 'OrderDate' },
                    { text: 'Shipped Date', datafield: 'ShippedDate' },
                    { text: 'Ship Name', datafield: 'ShipName' }
                ]
            });

            $("#customersGrid").jqxGrid('selectrow', 0);
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <h3>
            Customers</h3>
        <div id="customersGrid">
        </div>
        <h3>
            Orders by Customer</h3>
        <div id="ordersGrid">
        </div>
    </div>
</body>
</html>

January 7, 2014 at 10:35 am Master-Details with XML tables not linked #47377

Peter Stoev

Keymaster

Hi Philippe,

Here is a working version of your example. Note the XML mapping and the changes to the rowselect event callback. Moreover, the initial row selection should be called in the customersGrid ready callback function to make sure the grid has loaded when you call it.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css">
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var url = "../sampledata/customers.xml";
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'CustomerID', map: 'm\\:properties>d\\:CustomerID', type: 'string' },
                    { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName', type: 'string' },
                    { name: 'ContactName', map: 'm\\:properties>d\\:ContactName', type: 'string' },
                    { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle', type: 'string' },
                    { name: 'City', map: 'm\\:properties>d\\:City', type: 'string' },
                    { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode', type: 'string' },
                    { name: 'Country', map: 'm\\:properties>d\\:Country', type: 'string' }
                ],
                root: "entry",
                record: "content",
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (data) { }
            });

            $("#customersGrid").jqxGrid(
            {
                width: 670,
                height: 250,
                source: dataAdapter,
                keyboardnavigation: false,
                columns: [
                    { text: 'Company Name', datafield: 'CompanyName' },
                    { text: 'Contact Name', datafield: 'ContactName' },
                    { text: 'Contact Title', datafield: 'ContactTitle' },
                    { text: 'City', datafield: 'City' },
                    { text: 'Country', datafield: 'Country' }
                ],
                ready: function () {
                    $("#customersGrid").jqxGrid('selectrow', 0);
                }
            });

            // prepare the data
            var url = "../sampledata/orders.xml";
            var dataFields = [
                    { name: 'CustomerID', map: 'm\\:properties>d\\:CustomerID', type: 'string' },
                    { name: 'OrderID', map: 'm\\:properties>d\\:OrderID', type: 'string' },
                    { name: 'OrderDate', map: 'm\\:properties>d\\:OrderDate', type: 'string' },
                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'string' },
                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
            ];
            var source =
            {
                datatype: "xml",
                datafields: dataFields,
                root: "entry",
                record: "content",
                url: url
            };
            var ordersDataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (data) { }
            });
            ordersDataAdapter.dataBind();

            $("#customersGrid").on('rowselect', function (event) {
                var customerID = event.args.row.CustomerID;
                var records = new Array();
                var length = ordersDataAdapter.records.length;
                for (var i = 0; i < length; i++) {
                    var record = ordersDataAdapter.records[i];
                    if (record.CustomerID == customerID) {
                        records[records.length] = record;
                    }
                }

                var dataSource = {
                    datatype: "xml",
                    datafields: dataFields,
                    root: "entry",
                    record: "content",
                    localdata: records

                }
                var adapter = new $.jqx.dataAdapter(dataSource);

                // update data source.
                $("#ordersGrid").jqxGrid({ source: adapter });
            });

            $("#ordersGrid").jqxGrid(
            {
                width: 670,
                height: 250,
                keyboardnavigation: false,
                columns: [
                    { text: 'OrderID', datafield: 'OrderID' },
                    { text: 'OrderDate', datafield: 'OrderDate' },
                    { text: 'Shipped Date', datafield: 'ShippedDate' },
                    { text: 'Ship Name', datafield: 'ShipName' }
                ]
            });

        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <h3>
            Customers</h3>
        <div id="customersGrid">
        </div>
        <h3>
            Orders by Customer</h3>
        <div id="ordersGrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 7, 2014 at 10:55 am Master-Details with XML tables not linked #47379

Philippe

Participant

Thanks, Peter.
It works like a charm. One little issue: When the ‘customers’ grid is loaded for the first time, the ‘orders’ grid doesn’t display the related order details. Any idea what causes this ?

Philippe

January 7, 2014 at 11:19 am Master-Details with XML tables not linked #47381

Peter Stoev

Keymaster

Hi Philippe,

You may move the “selectrow” method call after in the ordersDataAdapter loadComplete callback.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 7, 2014 at 12:32 pm Master-Details with XML tables not linked #47386

Philippe

Participant

Many thanks, Peter.
We’ve changed the code as follows:


var ordersDataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (data) 
{ $("#customersGrid").jqxGrid('selectrow', 0); }
});

This works fine now and may be useful for other participants.
Philippe

Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.