pudaykiran pudaykiran - 2 months ago 25
CSS Question

jqgrid odd even row color

When I apply style class

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

I want to apply
odd even row color
for
all jqgrids
through
css


The grid looks like below screenshot.

oddevenproblem

When used below code in
loadComplete
function this problem is not occurred

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


jqgrid looks like below screenshot.

oddevenrow

Css Class

.myAltRowClass {
background: #E0E0E0;
}


Code:

$(document).ready(function(){
//jqGrid
$("#usersList").jqGrid({
url:'<%=request.getContextPath() %>/Admin/getAllUsersList',
datatype: "json",
colNames:['Edit','First Name','Middle Name','LastName','Mobile Number','Active'],
colModel:[
{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},
{name:'isActive',index:'user.isActive',width:80},
],
rowNum:20,
rowList:[10,20,30,40,50],
rownumbers: true,
pager: '#pagerDiv',
sortname: 'user.primaryEmail',
viewrecords: true,
sortorder: "asc",

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

$("tr.jqgrow:odd").addClass('myAltRowClass');
},

});
$('#gridContainer div:not(.ui-jqgrid-titlebar)').width("100%");
$('.ui-jqgrid-bdiv').css('height', window.innerHeight * .65);
$('#load_usersList').width("130");
$("#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

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 () {
    $(this).find(">tbody>tr.jqgrow:odd").addClass("myAltRowClassEven");
    $(this).find(">tbody>tr.jqgrow:even").addClass("myAltRowClassOdd");
}

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.

Comments