I would like to size a grid to a fixed height like 500px. If lets say only two records are placed in the grid I would like to fill the remaining rows as empty rows, and not make them clickable, so the grid fills 100% of its available height. Is there an easy way to do this?
Thanks, Bob
1)Set height:100% 2)you can change jqgrid background color
otherwise you can do like this...
This is sample...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test </title>
<link href="css/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var EditableID = 0;
jQuery("#list1").jqGrid({
datatype: "local",
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [
{ name: 'id', index: 'id', width: 75 },
{ name: 'invdate', index: 'invdate', width: 90 },
{ name: 'name', index: 'name', width: 100 },
{ name: 'amount', index: 'amount', width: 80, align: "right" },
{ name: 'tax', index: 'tax', width: 80, align: "right" },
{ name: 'total', index: 'total', width: 80, align: "right" },
{ name: 'note', index: 'note', width: 150, editoptions: { size: "20", maxlength: "200" }, editable: true, edittype: 'text', width: 75, sortable: true }
],
rowNum: 22,
height: 500,
loadComplete: function(data) {
var NoOfCellAdd = Number($("#list1").parent().parent().css('height').split('px')[0]) / 23;
for (var i = data.records; i <= NoOfCellAdd; i++) {
$("#list1").addRowData(i + 1, {});
}
},
onCellSelect: function(rowid, iCol, cellcontent, e) {
if (rowid <= EditableID) {
if ($("#lastCellId").val() != -1)
$("#list1").saveRow($("#lastCellId").val(), false, 'clientArray');
$('#list1').editRow(rowid, iCol, true);
$("input, text", e.target).focus();
$("#lastCellId").val(rowid);
}
},
autowidth: true,
rowList: [10, 20, 30],
pager: jQuery('#pager1'),
//sortname: 'id',
viewrecords: true,
// sortorder: "desc",
caption: "XML Example"
}).navGrid('#pager1', { edit: false, add: false, del: false });
var mydata = [
{ id: 1, invdate: "2007-10-01", name: "test1", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: 2, invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: 3, invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
{ id: 4, invdate: "2007-10-04", name: "test4", note: "note4", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: 5, invdate: "2007-10-04", name: "test5", note: "note5", amount: "200.00", tax: "10.00", total: "210.00" },
{id: 6, invdate: "2007-10-02", name: "test30", note: "note30", amount: "300.00", tax: "20.00", total: "320.00" }
];
EditableID = mydata.length;
$("#list1").jqGrid('setGridParam', { datatype: 'local', data: mydata }).trigger("reloadGrid");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="list1">
</table>
<div id="pager1">
</div>
</div>
<input type="hidden" id="lastCellId" name="Language" value="-1">
</form>
</body>
</html>
// --------------------------------------------------------------------------------
// This is working fine...but this is not right way to do...
// **rowNum: 22,height:500px**
© 2022 - 2024 — McMap. All rights reserved.