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

I hav
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 The typical data rows are the grid rows having the class 'jqgrow'. You should examine the You will find the demo here which shows the following results: The code of new version of the I recommend you additionally to use the recommendation which I described at the end of my previous answer. element), the text 'ghead_' and the index in the grid parameter
groupingView.sortnames[0] which represent the sorted names of the groups.
isEqual property of the row data and either hide or highlight the rows.
loadComplete handler I fill additionally belowloadComplete: 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();
}
}