jqgrid rowattr not applying class - css

Question

I want to apply background color to row of jqGrid row based on value of column, however the basic rowattr is not applying class to rows.
Below is the code (for simplicity I have removed the condition on which color needs to be applied)
jQuery("#employeeSalarysGrid").jqGrid({
height: 250,
url: 'http://localhost:50570/api/Test/Get',
mtype: "GET",
contentType: "application/json; charset=utf-8",
datatype: "json",
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: {
root: function (obj) { return obj; },
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.length; },
id: "0",
cell: "",
repeatitems: false
},
datatype: "json",
colNames: ['Id', 'Bank Name', 'Bank Name', 'Employee name', 'Joining date', 'Salary amount', 'Comments'],
colModel: [
{ name: 'Id', align: "center", hidden: true },
{ name: 'BankName', index: 'BankName', align: 'center', editable: false },
{
name: 'BankId', index: 'BankId', align: "center", hidden: true, required: true,
viewable: true, editrules: { edithidden: true, required: true },
editable: true,
edittype: 'select',
editoptions: {
dataUrl: '/api/Test/GetBanks',
buildSelect: function (data) {
var response = jQuery.parseJSON(data);
var s = '<select>';
if (response && response.length) {
for (var i = 0, l = response.length; i < l; i++) {
var bank = response[i];
s += "<option value=" + bank.BankId + ">" + bank.Name + "</option>";
}
}
return s + "</select>";
}
}
},
{ name: 'EmployeeName', align: "center", editable: true, editrules: { required: true } },
{ name: 'JoiningDate', align: "center", editable: true, editrules: { custom: true, custom_func: datecheck },
formatter: 'date', formatoptions: { srcformat: 'y-m-d', newformat: 'd-M-y' }, edittype: 'text', editable: true,
editoptions: { dataInit: function (el) { setTimeout(function () { $(el).datepicker({ dateFormat: 'd-M-y' }); }, 200); } }
},
//{ name: 'cdate', index: 'cdate', width: 80, align: 'right', formatter: 'date', srcformat: 'yyyy-mm-dd', newformat: 'm-d-Y', edittype: 'text', editable: true, editoptions: { dataInit: function (el) { setTimeout(function () { $(el).datepicker(); }, 200); } } },
{ name: 'SalaryAmount', align: "center", editable: true, editrules: { required: true } },
{ name: 'Comments ', align: "center", editable: true }
],
gridview: true,
autoencode: true,
ignorecase: true,
loadonce: true,
sortname: "InstallmentDate",
sortorder: "asc",
viewrecords: true,
rowNum: 10,
rowList: [10, 15, 20],
pager: '#employeeSalarysPager',
caption: "Employee Salary list",
rowattr: function (rd) {
return { "class": "rowClass" };
//alert("hi");
}
});
CSS style :
<style type="text/css">
.rowClass { color: blue; background-image: none;}
</style>
Note: If I uncomment //alert statement, it shows alert message 5 times. It means rowattr is getting invoked for each row, however css class is not getting applied.
Regards,
Abhilash

Answer 1

The rowattr do works correctly, but if you want that the class will be applied on selected rows too then you should change CSS rule to the following
.ui-widget-content .rowClass { color: blue; background-image: none; }
see the demo.