Custom Nested Grid - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Custom nested grid, data, grid, jqxgrid, nested grids, record, row, row details

This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 9 years, 6 months ago.

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

Author

Custom Nested Grid Posts

April 15, 2015 at 11:52 am Custom Nested Grid #69919

Participant

Hi Team,

I have nested grid with data where Child data may or may not be present. I want to apply nested grid functionality to only data where Child data is present. Is there any to achieve this functionality?

Please let me know if you have any questions.

Regards,
Mahesh Dhembre

April 15, 2015 at 1:32 pm Custom Nested Grid #69922

Dimitar

Participant

Hi Mahesh Dhembre,

This is possible by checking if there are child records and initializing the nested grid of a particular row only then. Here is a modification of the demo Nested Grids, which shows how to implement this (note the initrowdetails function):

<!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.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/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.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/employees.xml";

            var source =
            {
                datafields: [
                    { name: 'FirstName' },
                    { name: 'LastName' },
                    { name: 'Title' },
                    { name: 'Address' },
                    { name: 'City' }
                ],
                root: "Employees",
                record: "Employee",
                id: 'EmployeeID',
                datatype: "xml",
                async: false,
                url: url
            };

            var employeesAdapter = new $.jqx.dataAdapter(source);

            var orderdetailsurl = "../sampledata/orderdetails.xml";

            var ordersSource =
            {
                datafields: [
                    { name: 'EmployeeID', type: 'string' },
                    { name: 'ShipName', type: 'string' },
                    { name: 'ShipAddress', type: 'string' },
                    { name: 'ShipCity', type: 'string' },
                    { name: 'ShipCountry', type: 'string' },
                    { name: 'ShippedDate', type: 'date' }
                ],
                root: "Orders",
                record: "Order",
                datatype: "xml",
                url: orderdetailsurl,
                async: false
            };

            var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, { autoBind: true });
            orders = ordersDataAdapter.records;
            var nestedGrids = new Array();

            // create nested grid.
            var initrowdetails = function (index, parentElement, gridElement, record) {
                var id = record.uid.toString();
                var grid = $($(parentElement).children()[0]);
                nestedGrids[index] = grid;
                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 1;
                var filtervalue = id;
                var filtercondition = 'equal';
                var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                // fill the orders depending on the id.
                var ordersbyid = [];
                for (var m = 0; m < orders.length; m++) {
                    var result = filter.evaluate(orders[m]["EmployeeID"]);
                    if (result)
                        ordersbyid.push(orders[m]);
                }

                if (ordersbyid.length > 0) {
                    var orderssource = {
                        datafields: [
                            { name: 'EmployeeID', type: 'string' },
                            { name: 'ShipName', type: 'string' },
                            { name: 'ShipAddress', type: 'string' },
                            { name: 'ShipCity', type: 'string' },
                            { name: 'ShipCountry', type: 'string' },
                            { name: 'ShippedDate', type: 'date' }
                        ],
                        id: 'OrderID',
                        localdata: ordersbyid
                    }
                    var nestedGridAdapter = new $.jqx.dataAdapter(orderssource);

                    if (grid != null) {
                        grid.jqxGrid({
                            source: nestedGridAdapter, width: 780, height: 200,
                            columns: [
                              { text: 'Ship Name', datafield: 'ShipName', width: 200 },
                              { text: 'Ship Address', datafield: 'ShipAddress', width: 200 },
                              { text: 'Ship City', datafield: 'ShipCity', width: 150 },
                              { text: 'Ship Country', datafield: 'ShipCountry', width: 150 },
                              { text: 'Shipped Date', datafield: 'ShippedDate', width: 200 }
                            ]
                        });
                    }
                }
            }

            var photorenderer = function (row, column, value) {
                var name = $('#jqxgrid').jqxGrid('getrowdata', row).FirstName;
                var imgurl = '../../images/' + name.toLowerCase() + '.png';
                var img = '<div style="background: white;"><img style="margin:2px; margin-left: 10px;" width="32" height="32" src="' + imgurl + '"></div>';
                return img;
            }

            var renderer = function (row, column, value) {
                return '<span style="margin-left: 4px; margin-top: 9px; float: left;">' + value + '</span>';
            }

            // creage jqxgrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                height: 365,
                source: source,
                rowdetails: true,
                rowsheight: 35,
                initrowdetails: initrowdetails,
                rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 220, rowdetailshidden: true },
                ready: function () {
                    $("#jqxgrid").jqxGrid('showrowdetails', 1);
                },
                columns: [
                      { text: 'Photo', width: 50, cellsrenderer: photorenderer },
                      { text: 'First Name', datafield: 'FirstName', width: 100, cellsrenderer: renderer },
                      { text: 'Last Name', datafield: 'LastName', width: 100, cellsrenderer: renderer },
                      { text: 'Title', datafield: 'Title', width: 180, cellsrenderer: renderer },
                      { text: 'Address', datafield: 'Address', width: 300, cellsrenderer: renderer },
                      { text: 'City', datafield: 'City', width: 170, cellsrenderer: renderer }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

April 15, 2015 at 1:42 pm Custom Nested Grid #69924

mahesh.dhembre

Participant

Hello Dimiter,

Thanks for your quick response.

I have implemented the solution, but if there is no data in child it displays blank div with height specified in rowsheight attribute i.e. (rowsheight: 35). So is there any way to avoid rendering of template?

Regards,
Mahesh Dhembre

April 15, 2015 at 2:26 pm Custom Nested Grid #69927

Dimitar

Participant

Hello Mahesh Dhembre,

Unfortunately, this cannot be avoided. If you wish, you can display some message (e.g. “No data”) instead of the blank space.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.