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'> </td>" +
"<td colspan='3' class='noVerticalLines'> </td>" +
"<td class='noHorizLines noVerticalLines'> </td>" +
"<td colspan='2'> </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).