Remove Cell From JQGrid Column Header
Remove Cell From JQGrid Column Header
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<br/>
<div class="borderLessGrid">
<table>
<tr>
<td>
<label>Example to Test CSS in JQGrid.        </label>
</td>
<td>
<table id="grid" border="0"></table>
</td>
</tr>
</table>
</div>
CSS
.borderLessGrid .ui-widget-content {
border: none !important;
}
.grid-col {
padding-top: 5px !important;
padding-left: 5px !important;
background-color: #292929;
}
.fnt-bold {
font-family:"Arial", Verdana;
color:#ffffff;
font-size:12px;
font-weight:bold;
}
JavaScript
var data = [
["Re Net", "DSK1", "02200220", "OPEN"],
["Re Gross", "APPR", "77733337", "ENTERED"],
["Re 100", "TPY2", "34534534", "CLOSED"],
["Re Ceded", "ASY2", "4565532", "CLOSED"]
];
$("#grid").jqGrid({
datatype: "local",
height: "100%",
colNames: ['', 'Thingy', 'Number', 'Status'],
colModel: [{
name: 'id',
index: 'id',
width: 60,
sortable: false,
classes: "grid-col fnt-bold"
}, {
name: 'thingy',
index: 'thingy',
width: 90,
sortable: false,
sorttype: "date"
}, {
name: 'number',
index: 'number',
width: 80,
sortable: false,
sorttype: "float"
}, {
name: 'status',
index: 'status',
width: 100,
sortable: false,
sorttype: "float"
}],
loadComplete: function () {
//Color Column Header
jQuery('#grid_id').css("background", "white");
jQuery('#grid_status').css("background", "#292929");
jQuery('#grid_thingy').css("background", "#292929");
jQuery('#grid_number').css("background", "#292929");
}
});
var names = ["id", "thingy", "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, mydata[i]);
}
$("#grid").jqGrid('setGridParam', {
ondblClickRow: function (rowid, iRow, iCol, e) {
alert('double clicked');
}
});