jqGrid row alternating background

Question

How can I insert alternating row background color in jqGrid?

score 9 · Answer 1 · answered Nov 23 '09 at 22:30

9

Look at the altRows and altclass options. Beware of the typically inconsistent capitalization! This does use the jQuery UI theme if you're using jqGrid 3.5 or higher.

answered Nov 23 '09 at 22:30

Craig Stuntz

125,891
12
252
273

score 2 · Answer 2 · edited Mar 01 '11 at 20:06

2

function applyZebra(containerId) {
    $('#' + containerId + ' tr:nth-child(even)').addClass("jqgrow evenTableRow");
    $('#' + containerId + ' tr:nth-child(odd)').addClass("jqgrow oddTableRow");
}

ContainerId is your jqGrid ID. Call this method on the "gridComplete" event of your jqGrid.

edited Mar 01 '11 at 20:06

Peter Mortensen

30,738
21
105
131

answered Nov 22 '09 at 08:36

Nrj

6,723
7
46
58

Great solution, but it would be nice if the even/odd colors could be selected from the jQuery UI Theme. – Justin Ethier Nov 22 '09 at 15:55

score 2 · Answer 3 · answered Feb 18 '10 at 15:44

2

To use the jQuery UI theme use this code:

$('#'+gridName+' tr:nth-child(even)').removeClass("ui-priority-secondary");
$('#'+gridName+' tr:nth-child(odd)').addClass("ui-priority-secondary");

I use this code when I perform manual sorting (drag-n-drop)

answered Feb 18 '10 at 15:44

Pete Amundson

890
5
16

score 0 · Answer 4 · answered Oct 09 '12 at 22:27

Hello first defines the css:

<style type="text/css"> 
......
.Color_Red { background:red; }
.Color_Cyan { background:cyan; } 
......

Then in jqGrid ...

$("#list2").jqGrid({
........
loadComplete: function() {
  var rowIDs = jQuery("#list2").getDataIDs(); 
  for (var i=0;i<rowIDs.length;i=i+1){ 
    rowData=jQuery("#list2").getRowData(rowIDs[i]);
    var trElement = jQuery("#"+ rowIDs[i],jQuery('#list2'));

// Red       
    if (rowData.Estado == 0) {
        trElement.removeClass('ui-widget-content');
        trElement.addClass('Color_Red');
    }

// Cyan        
    if (rowData.Estado == 2) {
        trElement.removeClass('ui-widget-content');
        trElement.addClass('Color_Cyan');
    }
}
},

});

Thus we walk the rows and apply RED to fulfill the condition that == 0 and Cyan which satisfy the condition == 2.

You should change rowData.XXX == XX by column name and value to check.

I have it this way and it works perfectly.

Luck!

score 0 · Answer 5 · edited May 23 '17 at 10:27

Call loadComplete function to change background color of row in jqgrid.

loadComplete : function() {
    $("tr.jqgrow:odd").addClass('myAltRowClassEven');
    $("tr.jqgrow:even").addClass('myAltRowClassOdd');
},

for applying styles to background use below css.

<style type="text/css">
.myAltRowClassEven { background: #E0E0E0; border-color: #79B7E7; }
.myAltRowClassOdd { background: orange; }
</style>

Or

For changing row font in jqgrid see click below link

How can I change Background colour and Font of any row in JQGrid?

score -1 · Answer 6 · answered Nov 23 '09 at 11:24

-1

Here's how you do it:

$("#myGrid").jqGrid({
   ...
   gridComplete: function() {
       var _rows = $(".jqgrow");
       for (var i = 0; i < _rows.length; i += 2) {
           _rows[i].attributes["class"].value += " alt";
       }
   }
});

answered Nov 23 '09 at 11:24

Graviton

81,782
146
424
602

*Way* too much work. This feature is already built into the grid. No need to reinvent it. – Craig Stuntz Nov 23 '09 at 22:22

jqGrid row alternating background

6 Answers6