jQuery UI Widgets Forums Grid hide the nested grid with no data

This topic contains 4 replies, has 3 voices, and was last updated by  mandy33 9 years ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • hide the nested grid with no data #65638

    lipidong
    Participant

    In my case, I don’t want to display the nested grid if there is no data, which api I can use , please help me

    hide the nested grid with no data #65648

    Dimitar
    Participant

    Hello lipidong,

    Here are two code samples that show two possible solutions:

    1) If you know that a certain row does not need a nested grid (e.g. the row with index 2):

    <!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) {
                    if (index !== 2) {
                        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]);
                        }
    
                        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 }
                      ]
                });
    
                $("#jqxgrid").on('rowclick', function (event) {
                    // original event.
                    var ev = event.args.originalEvent;
                    var cell = $('#jqxgrid').jqxGrid('getcellatposition', ev.pageX, ev.pageY);
                    if (cell.column && cell.value) {
                        alert("Row clicked.");
                    }
                });
    
                $('#jqxgrid').on('rowexpand', function (event) {
                    // event arguments.
                    var args = event.args;
                    // row details.
                    var details = args.details;
                    // row's bound index.
                    var rowBoundIndex = args.rowindex;
    
                    if (rowBoundIndex === 2) {
                        $('#jqxgrid').jqxGrid('hiderowdetails', 2);
                    }
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="jqxgrid">
        </div>
    </body>
    </html>

    2) If you do not know which row(s) does not have any nested grid data:

    <!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();
    
                var emptyRow = null;
    
                // 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]);
                    }
    
                    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, { autoBind: true,
                        loadComplete: function () {
                            var records = dataAdapter.records;
                            if (records.length === 0) {
                                emptyRow = index;
                            }
                        }
                    });
    
                    if (grid != null && emptyRow !== index) {
                        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 }
                      ]
                });
    
                $("#jqxgrid").on('rowclick', function (event) {
                    // original event.
                    var ev = event.args.originalEvent;
                    var cell = $('#jqxgrid').jqxGrid('getcellatposition', ev.pageX, ev.pageY);
                    if (cell.column && cell.value) {
                        alert("Row clicked.");
                    }
                });
    
                $('#jqxgrid').on('rowexpand', function (event) {
                    // event arguments.
                    var args = event.args;
                    // row details.
                    var details = args.details;
                    // row's bound index.
                    var rowBoundIndex = args.rowindex;
    
                    if (rowBoundIndex === emptyRow) {
                        $('#jqxgrid').jqxGrid('hiderowdetails', emptyRow);
                    }
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="jqxgrid">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    hide the nested grid with no data #66030

    mandy33
    Participant

    Hi,

    I have some rows in a nested grid with no data on the expanded rows. I’d like to hide the arrows on the parent level, so users will not be able to drill down to its empty expand rows. Is there any ways to hide arrows for those particular rows? I tried to set showrowdetailscolumn: false, but it would hide all arrows for the Grid. Please help, thank you!

    Mandy

    hide the nested grid with no data #66051

    Dimitar
    Participant

    Hi Mandy,

    Here is how to remove the arrows of the first and third rows of a grid:

    $("#jqxgrid").jqxGrid(
    {
        width: 850,
        height: 250,
        source: dataAdapter,
        rowdetails: true,
        rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'><ul style='margin-left: 30px;'><li class='title'></li><li>Notes</li></ul><div class='information'></div><div class='notes'></div></div>", rowdetailsheight: 200 },
        ready: function () {
            var arrows = $('#jqxgrid .jqx-grid-cell-pinned');
            arrows.eq(0).css('background-image', 'none');
            arrows.eq(2).css('background-image', 'none');
        },
        initrowdetails: initrowdetails,
        columns: [
                { text: 'First Name', datafield: 'firstname', width: 200 },
                { text: 'Last Name', datafield: 'lastname', width: 200 },
                { text: 'Title', datafield: 'title', width: 180 },
                { text: 'City', datafield: 'city', width: 100 },
                { text: 'Country', datafield: 'country' }
            ]
    });

    Best Regards,
    Dimitar

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

    hide the nested grid with no data #66100

    mandy33
    Participant

    Yup, it works. Thank you for your help!

    Mandy

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

You must be logged in to reply to this topic.