jqGrid altRows - Every two rows

Question

I am outputting a jqGrid and need to alternate row colors but rather than the common every-other-row, I need to alternate every-two-rows. Two rows of one color, followed by two rows of another color and then switch back to the first color and so on...

Here's a sample of what I need to achieve...

Sample grid:

+-------------------+
| row color 'black' |
| row color 'black' |
| row color 'white' |
| row color 'white' |
| row color 'black' |
| row color 'black' |
| row color 'white' |
| row color 'white' |
+-------------------+

Seems there must be more to it than jqGrid's altRows and altclass.

Thoughts?

Thanks.

Answer 1

It's interesting question! In general rowattr callback is the best way to assign attributes (for example class attribute) to the rows, but rowattr callback in the current implementation of jqGrid has no information about the index of the row. So one have to set altclass inside of loadComplete.

To set standard altclass one can use the following

loadComplete: function () {
    $(this).find(">tbody>tr.jqgrow:visible:odd").addClass("myAltRowClass");
}

You can use the code in case of alternating TreeGrid (see the answer) or Grouping for example.

If you need to alternate every-two-rows then you can use custom filter instead of :odd. For example the demo uses

loadComplete: function () {
    $(this).find(">tbody>tr.jqgrow:visible")
        .filter(function (i) {
            return i % 4 >= 2;
        })
        .addClass("myAltRowClass");
}

and it displays the following grid