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 enter image description here .

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;}

You should provide a demo (in [jsfiddle](http://jsfiddle.net/) for example) which reproduce the problem. You speak about "spacer" columns, but it's unclear how you implemented such columns. — Oleg, Jul 09 '13 at 17:08
@Oleg I updated with more details, I would have based the method on a mix of your posts at some point Oleg, and they have worked great with only this small issue I noticed when starting to use grouping. I can probably try and throw a jsfiddle example together if the above doesn't give a full picture. — Mark, Jul 09 '13 at 17:49
OK I remind me now about close question, but I am still not sure how you want to have grouping rows look. Do you want just have no horizontal line between rows in the "empty" columns? What about the row in collapsed state? — Oleg, Jul 09 '13 at 18:00
@Oleg A perfect outcome would be an unbroken vertical column with a border on both sides (as I"m looking for that visual break in between columns). I would settle for at least a group row that didn't have a bottom border on the vertical spacer column. — Mark, Jul 09 '13 at 18:13

score 1 · Accepted Answer · edited May 23 '17 at 12:21

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

enter image description here

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).

edited May 23 '17 at 12:21

Community

1
1

answered Jul 09 '13 at 19:14

Oleg

220,925
34
403
798

Hum, this does seem like the right path to be on, the only trick left is that I have a button that toggles the visibility of a number of columns based on a user preference. Do you see any way around this? – Mark Jul 10 '13 at 01:32
As well, thank you greatly as always for taking the time, how do I buy you a beer! – Mark Jul 10 '13 at 01:32
@Mark: Sorry, but I don't understand what you mean "a button that toggles the visibility of a number of columns based on a user preference". Which problem you have exactly? I posted just an example of added `` elements (see `$groupingHeaders.append` in my code). You can makes the content dynamical based on `colModel`, the columns `emptyX` and based on which columns have currently `hidden: true` property. – Oleg Jul 10 '13 at 16:18
I turn on and off the visibility of columns which messes up the code above. I think the answer though is to write something that will change remove and add the row settings based on the visibility of the other rows. Thanks again for your help. – Mark Jul 10 '13 at 16:22
May I ask as well why you started your variables with a "$"? Is that just a personal preference to how you name your variables? – Mark Jul 10 '13 at 16:34
1

@Mark: I use very easy name conversion. Simple JavaScript variables and variables which hold DOM elements have no $ prefix. Only jQuery wrapper of DOM elements have $ prefix. For example `this` variable inside of `loadComplete` is DOM of `` element. So I would use `var self = this;`, but I would use `var $self = $(this);`. Such name conversion simplify the usage. I would use `$(self).find(">tbody>tr")` but `$self.find(">tbody>tr")`
– Oleg Jul 10 '13 at 16:55

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

1 Answers1