Alex Rivera | Logout

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

Asked 2010-12-06T18:56:18.820
12

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.

css jqgrid zebra-striping
Edit
Report

1 Answer

3

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;  }
answered 2010-12-06T19:47:35.670

Your Answer