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 hav

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.