jqgrid row alternating background

Question

How can I insert alternating row background color in jqgrid?

Answer 1

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.

Answer 2

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.

Answer 3

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)