CODEWITHSUNDEEP
jqueryjqgrid
Yan
Yan

Reputation: 101

jqGrid row alternating background

How can I insert alternating row background color in jqGrid?

Upvotes: 10

Views: 12961

Answers (6)

UdayKiran Pulipati
UdayKiran Pulipati

Reputation: 6667

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?

Upvotes: 0

Javier
Javier

Reputation: 99

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!

Upvotes: 0

Nrj
Nrj

Reputation: 6831

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.

Upvotes: 2

Pete Amundson
Pete Amundson

Reputation: 900

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)

Upvotes: 2

Craig Stuntz
Craig Stuntz

Reputation: 126547

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.

Upvotes: 9

Graviton
Graviton

Reputation: 83254

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

Upvotes: -1

Related Questions