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.

Joachim

Could you post a code example including the jQuery UI theam what you use. How exactly you define altclass class which you use. The best is the full code example which reproduces the problem. – Enceladus

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.

Enceladus

@Marcus: I made small changes of my answer and added the url to the demo. – Enceladus

Interesting.. I will try using the background-image:none setting instead of using the approach I described with removeClass('ui-widget-content') – Joachim

Worked - one caveat though - see my updated question. Thanks Oleg! – Joachim

@Marcus: I read the "updated" part of your question. It is exactly what I mean and what I used in my demo, but I find good to point the importance of the order for other reader. – Enceladus

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

Joachim

Sorry Marcus, is it a solution of your problem or only explanation? If it is not a solution you should also include myAltRowClass definition which you use. – Enceladus

Well this does work, but it's not a great solution. If you apply a different theme other than flick then the grid doesn't look as it should as I am hard coding the border color in myAltRowClass (see updated post) and some other themes use different colors. So if we used a different theme I would have to change the color in myAltRowClass. This isn't ideal - I'd like to be able to pick a different theme and have it work instantly without any other changes. Note that I have to include the border property as the odd rows still use ui-widget-content which sets the border. – Joachim

I am not designer. If the default altclass class 'ui-priority-secondary' are good defined from the designer of the theme, then one will have no problem at all themes. If 'ui-priority-secondary' is not the best choice and you can not find another standard class existing in all themes, which you can use as altclass, then you will have to customize his own altclass for every theme. I see no ways. – Enceladus

Fair enough Oleg - if you want to add a answer to this question I will accept it as the solution I used came from one of your (other) answers.. – Joachim

I agree with you. I suppose that the problem is common, so I made some more tests and wrote my answer on your questions using mostly the same information which you already known. – Enceladus

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.

Orvah

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

Prying