jqGrid zebra/alt rows background not working due to UI Theme class

Question

We cannot get zebra striping to work in jqGrid.

We use altclass and altRows - issue is it appears the ui-widget-content class from the JQuery UI has a background setting which is overriding our altclass's background setting. Any ideas?

---

Update: Both answers below work. Oleg's is the cleanest solution by far.

For Oleg's solution to work, your altRows class has to be defined after including the JQuery UI CSS class as both the JQuery UI and the custom alt rows class define the background property and the last class defined wins.

Answer 1

jqGrid use jQuery UI class 'ui-priority-secondary' as the default value of the altclass parameter. The class are described in jQuery UI documentation as

Class to be applied to a priority-2 button in situations where button hierarchy is needed. Applies normal weight text and slight transparency to element.

It is of cause not exactly the description of the zebra striping, but there are not so many standard classes which can be used. Unfortunately even rows having 'ui-priority-secondary' looks not so different from odd rows in the most themes. So to improve visibility one have to define the class altclass manually.

One of the most native ways to make even rows seen different as the odd rows is the usage of different background color. The problem is that ui-widget-content class use an background image defined with background CSS style, so the most native setting of background-color will not work. To fix the problem one have to do one from the things 1) remove ui-widget-content class 2) use background CSS style instead of background-color 2) use background-image:none together with the background-color style. The simplest way to do this is define your custom AltRowClass as

.myAltRowClass { background: #DDDDDC; }

or

.myAltRowClass { background-color: #DDDDDC; background-image: none; }

and then to use altRows:true and altclass:'myAltRowClass' parameters of jqGrid.

Another way is to do the same without altRows and altclass parameters:

loadComplete: function() {
    $("tr.jqgrow:odd").css("background", "#DDDDDC");
}

In the case you will has some small disadvantages in hovering or selecting the even lines. The following code works better, but it do the same what altRows:true and altclass:'myAltRowClass' do:

loadComplete: function() {
    $("tr.jqgrow:odd").addClass('myAltRowClass');
}

Of cause the background color and other CSS styles attributes which you can set for the even rows are depend from the theme which you use, so if you plan to use ThemeRoller you will have to choose altclass for every theme, which you will allow to choose.

UPDATED: Just seen that I forgot to include the link to the demo file which demonstrate what I wrote live. The demo is here.

Answer 2

Per Oleg.. in loadComplete:

$.each(grid.getDataIDs(),
    function(index, key){
        if(index % 2 !== 0) {
            var t = $("#" + key, grid);
            t.removeClass('ui-widget-content');
        }
    }
);

And then in the grid definition:

altRows:true,
altclass:'myAltRowClass',

With `myAltRowClass':

.myAltRowClass { background: #F8F8F8 ; border:1px solid #DDDDDD;  }

Answer 3

here is my solution:

altRows     : true,
altclass    : 'oddRow',

gridComplete: function() {
    $(".jqgrow:odd").hover(
        function() { $(this).removeClass("oddRow");}, 
        function(event) { $(this).addClass("oddRow");}
    );
}, 

it worked for me and can be used with any ui theme.

Answer 4

I added the following CSS to a supplementary file to style the alternate row and row hover without using additional Javascript:

table.ui-jqgrid-btable tr:nth-child(odd) td{
    background-color: #E7F0FD;
}
table.ui-jqgrid-btable tr:hover:nth-child(odd) td{
    background: url("images/ui-bg_glass_75_dadada_1x400.png") repeat-x scroll 50% 50% rgb(6, 41, 97);
}