pudaykiran pudaykiran - 11 months ago 220
CSS Question

jqgrid odd even row color

When I apply style class

for change
of jqgrid
odd even row
. left, right and bottom borders are in black color.

I want to apply
odd even row color
all jqgrids

The grid looks like below screenshot.


When used below code in
function this problem is not occurred

$("tr.jqgrow:odd").css("background", "#E0E0E0");

jqgrid looks like below screenshot.


Css Class

.myAltRowClass {
background: #E0E0E0;


url:'<%=request.getContextPath() %>/Admin/getAllUsersList',
datatype: "json",
colNames:['Edit','First Name','Middle Name','LastName','Mobile Number','Active'],
{name:'userId',search:false,index:'userId',width:30,sortable: false,formatter: editLink},
{name:'firstName',index:'firstName', width:100},
{name:'middleName',index:'middleName', width:100},
{name:'lastName',index:'lastName', width:100},
{name:'mobileNo',index:'user.mobileNo', width:100},
rownumbers: true,
pager: '#pagerDiv',
sortname: 'user.primaryEmail',
viewrecords: true,
sortorder: "asc",

loadComplete: function() {
//$("tr.jqgrow:odd").css("background", "#E0E0E0");


$('#gridContainer div:not(.ui-jqgrid-titlebar)').width("100%");
$('.ui-jqgrid-bdiv').css('height', window.innerHeight * .65);
$("#usersList").jqGrid('navGrid','#pagerDiv',{edit:false,add:false,del:false},{},{},{}, {closeAfterSearch:true});
$(".inline").colorbox({inline:true, width:"20%"});

function editLink(cellValue, options, rowdata, action)
return "<a href='<%=request.getContextPath()%>/Admin/editUser/" + rowdata.userId + "' class='ui-icon ui-icon-pencil' ></a>";

Answer Source

The demo demonstrates how to define CSS rules and set the rules to odd and even rows of the grid. The code used in the demo

loadComplete: function () {

It's important to understand that jqGrid use first hidden row in the grid to set the column widths. So one have to use jQuery :even selector to set class on odd rows and one have to use :odd selector to set class on even rows.

The CSS rules which I used in the demo are the following

.myAltRowClassEven { background: #E0E0E0; border-color: #79B7E7; color: Tomato; }
.myAltRowClassOdd { background: DarkOrange; }
.ui-state-hover.myAltRowClassEven { color: Magenta; }
.ui-state-hover.myAltRowClassOdd { color: RoyalBlue; }
.ui-state-highlight.myAltRowClassEven { color: PaleGreen; }
.ui-state-highlight.myAltRowClassOdd { color: Sienna; }

As the result one get very multicolored picture like with different colors or background colors for odd/even/hovered/selected rows:

enter image description here

The colors looks terrible. I wanted just demonstrates how one customize there.