jqGrid grouping rows overriding "spacer" columns that I build into my grid

Question

When I add grouping to a grid it works great other then one problem. The row which contains the grouping information is being built with a colspan for the "width" of the grid and this means it sits on top of some of the vertical columns I build into the grid to help add visual separation.

Is there a way to have this row not skip that column so I can keep a nice visual break between sections in my grid?

Update: I add these vertical "spacers" columns by the following method procedure: -in the jqGrid setup

    beforeProcessing: function (data, status, xhr) {
        //add the spaces to the returned data to allow for the blank vertical columns in the grid
        for (var x = 0, length = data.rows.length; x < length; x++) {
            data.rows[x].cell.splice(6, 0, "");
        } //for
    }, //beforeProcessing

-colmodel setup matching the cells that will contain the "space"

{ name: "empty1" ,width: 10, sortable: false, hidedlg: true, search: false, resizable: false, fixed: true, classes: 'NoHorizontalGridBorders' },

-css

.NoHorizontalGridBorders { border-bottom-color: transparent !important; background-color: White !important;}

Answer 1

If I understand correctly what you need you have to modify grouping lines inside of loadComplete. For example the following demo, which is modification of the demo from the answer, display the following grid

The code is very simple:

loadComplete: function () {
    var $groupingHeaders = $(this).find(">tbody>tr.jqgroup");
    $groupingHeaders.find(">td").addClass("noVerticalLines").attr("colspan", "1");
    $groupingHeaders.append("<td class='noHorizLines noVerticalLines'>&nbsp;</td>" +
        "<td colspan='3' class='noVerticalLines'>&nbsp;</td>" +
        "<td class='noHorizLines noVerticalLines'>&nbsp;</td>" +
        "<td colspan='2'>&nbsp;</td>");
}

where CSS on the classes noHorizLines and noVerticalLines defined as

.ui-jqgrid tr.ui-row-ltr td.noVerticalLines { border-right-color: transparent; }
.ui-jqgrid tr.ui-row-ltr td.noHorizLines { border-bottom-color: transparent; }

In the same way you can modify the above code to make some other effects (horizontal or vertical lines on the places where you wan to have it).