jquery - Hide Grouping Heading in jqgrid if every row inside it is hidden

Question

This is a continuation to this question which Oleg has answered.

I have 2 configuration files.

I compare them for equality, and so I have two options as shown in the image (radio buttons) a. View All Records, b. View Differences

option a. The grid displays all the rows, only change is that the values which are not equal (identified by isEqual=false in JSON) they are in different color.

In option b.

if the corresponding rows are not equal (identified by isEqual=false in JSON) then row color in the grid is changed and the equal (identified by isEqual=true in JSON) row values are not displayed (since this is option b. View Differences. So now in some configuration (json) the Product (grouping) has all the rows equal (i.e., isEqual=true) under which all the rows are hidden, I want if all the rows inside the row is hidden then the Grouping also should not be visible.

eg: if Product grouping has all the rows hidden then even the Product grouping should be hidden

small part of Json

{
"response": [
{
  "id": "1",
  "elementName": "A",
  "category": "System",
  "subCategory": "Environment",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "firstValue": "5242880",
      "secondValue": "5242880"
    }
  ]
},

{
  "id": "23",
  "elementName": "TERM",
  "category": "System",
  "subCategory": "Environment",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "firstValue": "xterm",
      "secondValue": "xterm"
    }
  ]
},

{
  "id": "33",
  "elementName": "bitmode",
  "category": "Product",
  "subCategory": "Product",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "bitmode",
      "firstValue": "file: cannot open /home/asimon/java/AIXJAVA/java/bin/libssaiok.sou000a",
      "secondValue": "file: cannot open /home/asimon/java/AIXJAVA/java/bin/libssaiok.sou000a"
    }
  ]
},

{
  "id": "36",
  "elementName": "coredump - hard",
  "category": "System",
  "subCategory": "Userlimit",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "hard",
      "firstValue": "unlimited ",
      "secondValue": "unlimited "
    }
  ]
},
{
  "id": "37",
  "elementName": "coredump - soft",
  "category": "System",
  "subCategory": "Userlimit",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "soft",
      "firstValue": "unlimited ",
      "secondValue": "unlimited "
    }
  ]
},
{
  "id": "38",
  "elementName": "cpuspeed",
  "category": "System",
  "subCategory": "System",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "cpuspeed",
      "firstValue": " 4204 u000a",
      "secondValue": " 4204 u000a"
    }
  ]
},
{
  "id": "39",
  "elementName": "data - hard",
  "category": "System",
  "subCategory": "Userlimit",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "hard",
      "firstValue": "unlimited ",
      "secondValue": "unlimited "
    }
  ]
},
{
  "id": "40",
  "elementName": "data - soft",
  "category": "System",
  "subCategory": "Userlimit",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "soft",
      "firstValue": "unlimited ",
      "secondValue": "unlimited "
    }
  ]
}
{
  "id": "46",
  "elementName": "machine",
  "category": "System",
  "subCategory": "System",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "machine",
      "firstValue": "000CE082D900u000a",
      "secondValue": "000CE082D900u000a"
    }
  ]
},
{
  "id": "47",
  "elementName": "maxfilesperproc",
  "category": "System",
  "subCategory": "Kernel Parameters",
  "isEqual": false,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "maxfilesperproc",
      "firstValue": " 8192u000a",
      "secondValue": " 2000u000a"
    }
  ]
},
{
  "id": "48",
  "elementName": "maxthreadsperproc",
  "category": "System",
  "subCategory": "Kernel Parameters",
  "isEqual": false,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "maxthreadsperproc"
    }
  ]
},
{
  "id": "49",
  "elementName": "memory - hard",
  "category": "System",
  "subCategory": "Userlimit",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "hard",
      "firstValue": "unlimited ",
      "secondValue": "unlimited "
    }
  ]
},
{
  "id": "50",
  "elementName": "memory - soft",
  "category": "System",
  "subCategory": "Userlimit",
  "isEqual": false,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "soft",
      "firstValue": "32768 ",
      "secondValue": "unlimited "
    }
  ]
},
{
  "id": "51",
  "elementName": "mempagesize",
  "category": "System",
  "subCategory": "Kernel Parameters",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "mempagesize",
      "firstValue": "4096u000a",
      "secondValue": "4096u000a"
    }
  ]
},
{
  "id": "52",
  "elementName": "nofiles - hard",
  "category": "System",
  "subCategory": "Userlimit",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "hard",
      "firstValue": "unlimited ",
      "secondValue": "unlimited "
    }
  ]
},
{
  "id": "53",
  "elementName": "nofiles - soft",
  "category": "System",
  "subCategory": "Userlimit",
  "isEqual": false,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "soft",
      "firstValue": "8192 ",
      "secondValue": "2000 "
    }
  ]
},
{
  "id": "54",
  "elementName": "numberofcpu",
  "category": "System",
  "subCategory": "System",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "numberofcpu",
      "firstValue": " 2u000a",
      "secondValue": " 2u000a"
    }
  ]
},
{
  "id": "55",
  "elementName": "osname",
  "category": "System",
  "subCategory": "System",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "osname",
      "firstValue": "AIXu000a",
      "secondValue": "AIXu000a"
    }
  ]
},
{
  "id": "56",
  "elementName": "release",
  "category": "System",
  "subCategory": "System",
  "isEqual": true,
  "isPrasentinXml1": true,
  "isPrasentinXml2": true,
  "isPrasentinXml3": false,
  "attribute": [
    {
      "name": "release",
      "firstValue": "1u000a",
      "secondValue": "1u000a"
    }
  ]
}

],
"xls_path": "\csm\files\comparefiles\compare_output.xls"
}

code

$('#compareContent').empty();
        $('<div id="compareParentDiv" width="100%">'+
          '<table id="list2" cellspacing="0" cellpadding="0"></table>'+
                '<div id="gridpager3"></div></div>')
        .appendTo('#compareContent');

        $("#compareParentDiv").hide();

        var gridDiff = $("#list2");
        gridDiff.jqGrid({
            datastr: compareData,
            datatype: "jsonstring",
            colNames: ['KeyName', 'SubCategory', starheader, header1,'isEqual'],
            colModel: [
                { name: 'elementName', index: 'elementName', key: true, width: 120 },
                { name: 'subCategory', index: 'subCategory', width: 1 },
                { name: 'firstValue', index: 'firstValue', width: 310, jsonmap:'attribute.0.firstValue' },
                { name: 'secondValue', index: 'secondValue', width: 310,jsonmap:'attribute.0.secondValue' },
                { name: 'isEqual', index: 'isEqual', width: 1,hidden:true}
            ],
            pager: '#gridpager3',
            rowNum:50,
            scrollOffset:1,
            //viewrecords: true,
            jsonReader: {
                repeatitems: false,
                page: function(){return 1;},
                root: "response"
            },
            //rownumbers: true,

            height: '320',
            autowidth:true,
            grouping: true,

            groupingView: {
                groupField: ['subCategory'],
                groupOrder: ['desc'],
                groupDataSorted : true,
                groupColumnShow: [false],
                //groupCollapse: true,
                groupText: ['<b>{0}</b>']

            },

            loadComplete: function() {
                if (this.p.datatype !== 'local') {
                    setTimeout(function () {
                       gridDiff.trigger('reloadGrid');
                   }, 0);
                } else {
                    $("#compareParentDiv").show();
                }

                var i, names=this.p.groupingView.sortnames[0], l = names.length;
                 data = this.p.data, rows = this.rows, item;

                for (i=0;i<l;i++) {
                    if ($.inArray(names[i],grouping) >= 0) {
                        $(this).jqGrid('groupingToggle',this.id+"ghead_"+i);

                        $(rows.namedItem(this.id+"ghead_"+i)).find("span.ui-icon").click(function(){
                            var len = data.length, iRow;
                            for (iRow=0;iRow<len;iRow++) {
                                item = data[iRow];
                                if (item.isEqual) {
                                    $(rows.namedItem(item._id_)).hide();
                                }
                            }
                        });

                    } else {
                        // hide the grouping row
                        $('#'+this.id+"ghead_"+i).hide();
                    }
                    //console.info($('#'+this.id+"ghead_"+i));
                }

                /*var i, names=this.p.groupingView.sortnames[0], l = names.length,
                data = this.p.data, rows = this.rows, item;
                for (i=0;i<l;i++) {
                    if (names[i]==='Environment') {
                        $(this).jqGrid('groupingToggle',this.id+"ghead_"+i);
                        $(rows.namedItem(this.id+"ghead_"+i)).find("span.ui-icon").click(function(){
                            var len = data.length, iRow;
                            for (iRow=0;iRow<len;iRow++) {
                                item = data[iRow];
                              

Answer 1

I suggest that you change a little the way in which the grid rows are enumerated inside of the loadComplete handler. I suggest to enumerate all grid rows in the way described here.

The row having 'jqgfirstrow' class will be used only to set the width of the column. It should be skipped.

The rows having 'jqgroup' class are the grouping rows. The ids of the rows will be construed from the grid id (the id of the <table> element), the text 'ghead_' and the index in the grid parameter groupingView.sortnames[0] which represent the sorted names of the groups.

The typical data rows are the grid rows having the class 'jqgrow'. You should examine the isEqual property of the row data and either hide or highlight the rows.

You will find the demo here which shows the following results:

The code of new version of the loadComplete handler I fill additionally below

loadComplete: function () {
    var p = this.p, data = p.data, indexes = p._index,
        names = p.groupingView.sortnames[0], iName, idParts,
        rows = this.rows, cRows = rows.length, iRow, $row, rowData,
        previousGrouppigRow = null, hasHighlitedItem = false,
        lastCollaped = false,
        onGroupingExpand = function () {
            var $curRow = $(this).closest("tr.jqgroup").next();
            while ($curRow.hasClass('jqgrow')) {
                rowData = data[indexes[$curRow[0].id]];
                if (rowData.isEqual) {
                    $curRow.hide();
                }
                $curRow = $curRow.next();
            }
        };

    if (this.p.datatype !== 'local') {
        // reload grid to sort it
        setTimeout(function () {
            gridDiff.trigger('reloadGrid');
        }, 0);
        return; //we need not do anything now
    } else {
        parentContainer.show();
    }

    for (iRow = 0; iRow < cRows; iRow += 1) {
        $row = $(rows[iRow]);
        if ($row.hasClass('jqgroup')) {
            $row.find("span.ui-icon").click(onGroupingExpand);
            idParts = $row[0].id.split('ghead_');
            iName = idParts[idParts.length-1];
            if ($.inArray(names[iName], grouping) >= 0) {
                // collape the grouping rows from the "grouping" array
                gridDiff.jqGrid('groupingToggle', $row[0].id);
                lastCollaped = true;
            }
            // the row is the group header
            if (previousGrouppigRow !== null && hasHighlitedItem === false) {
                // the previous group has no highlited items
                if (!lastCollaped) {
                    // collapse the group only if it is not already collaped
                    gridDiff.jqGrid('groupingToggle', previousGrouppigRow[0].id);
                }
                previousGrouppigRow.hide();
            }
            previousGrouppigRow = $row;
            hasHighlitedItem = false;
        } else if ($row.hasClass('jqgrow')) {
            rowData = data[indexes[$row[0].id]];
            if (!rowData.isEqual) {
                hasHighlitedItem = true;
                $row.css({
                    "background-color": "#FFE3EA",
                    "background-image": "none"
                });
            } else {
                $row.hide();
            }
        }
    }
    if (previousGrouppigRow !== null && hasHighlitedItem === false) {
        // the previous grout has no highlited items
        if (!lastCollaped) {
            gridDiff.jqGrid('groupingToggle', previousGrouppigRow[0].id);
        }
        previousGrouppigRow.hide();
    }
}

I recommend you additionally to use the recommendation which I described at the end of my previous answer.