My JQGrid setup includes the following:
<table id="grid"></table>
var data = [[48803, "DSK1", "", "02200220", "OPEN"], [48769, "APPR", "", "77733337", "ENTERED"]];
$("#grid").jqGrid({
datatype: "local",
height: 250,
colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status'],
colModel: [{
name: 'id',
index: 'id',
width: 60,
sorttype: "int"
}, {
name: 'thingy',
index: 'thingy',
width: 90,
sorttype: "date"
}, {
name: 'blank',
index: 'blank',
width: 30
}, {
name: 'number',
index: 'number',
width: 80,
sorttype: "float"
}, {
name: 'status',
index: 'status',
width: 80,
sorttype: "float"
}],
caption: "Stack Overflow Example",
gridComplete: function () {
var rowIDs = $("#grid").getDataIDs();
for (var i = 0; i < rowIDs.length; i++) {
$("#grid").jqGrid('setRowData', rowIDs[i], false, {background : '#FF3300'});
var trid = $("#grid tr#"+rowIDs[i]);
if(trid.length > 0)
trid.addClass("manualreportgriderror");
}
}
});
var names = ["id", "thingy", "blank", "number", "status"];
var mydata = [];
for (var i = 0; i < data.length; i++) {
mydata[i] = {};
for (var j = 0; j < data[i].length; j++) {
mydata[i][names[j]] = data[i][j];
}
}
for (var i = 0; i <= mydata.length; i++) {
$("#grid").jqGrid('addRowData', i + 1, mydata[i]);
}
$("#grid").jqGrid('setGridParam', {ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}});
I have color-coded rows in the grid as red after the grid's complete event.
If I remove the color on the rows, hover functionality works on the grid.
I attempted to add the following CSS:
.ui-state-hover-grid {
background-color: yellow !important;
}
But this applies yellow color throughout the application and not just on the grid.
How can I enable hover on colored rows? And apply a yellow background color only for grid rows when hovered over?
HTML Code:
<div class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" id="gbox_grid" dir="ltr"... Thank you in advance.