<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="Content/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.5/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.5/js/jquery.jqgrid.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
InventoryGrid();
})
</script>
<script>
function InventoryGrid() {
$("#InvertoryGrid").jqGrid({
url: "http://localhost:97/Service1.svc/UsedMotoCycleMaint/kc-1",
datatype: "json",
colNames: ['ID', 'stockNumber', 'motoMake', 'motoModel', 'motoYear', 'engineType', 'fuelSystem', 'mileage', 'motoColor', 'price', 'newPrice', 'motoStatus', 'userState', 'userCity', 'picture', 'imgDisplay'],
//colModel takes the data from controller and binds to interiorColor
colModel: [
{ key: true, name: "ID", index: 'ID', editable: false, width: 50, hidden: true },
{ key: false, name: "stockNumber", index: 'stockNumber', editable: false, width: 100, align: 'center', hidden: true },
{ key: false, name: "motoMake", index: 'motoMake', editable: false, width: 70, align: 'center' },
{ key: false, name: "motoModel", index: 'motoModel', editable: false, width: 90, align: 'left' },
{ key: false, name: "motoYear", index: 'motoYear', editable: false, width: 60, align: 'left' },
{ key: false, name: "engineType", index: 'engineType', editable: false, width: 150, align: 'left' },
{ key: false, name: "fuelSystem", index: 'fuelSystem', editable: false, width: 150, align: 'center' },
{ key: false, name: "mileage", datafield: "mileage", width: 50, align: 'center' },
{ key: false, name: "motoColor", datafield: "motoColor", width: 50, align: 'center', hidden: true},
{ key: false, name: "price", datafield: "price", width: 60, align: 'right', formatter: 'currency', formatoptions: { prefix: '$', suffix: '', thousandsSeparator: ',' } },
{ key: false, name: "newPrice", datafield: "newPrice", width: 50, align: 'right', hidden: true },
{ key: false, name: "motoStatus", datafield: "motoStatus", width: 60, align: 'right', hidden: true},
{ key: false, name: "userState", datafield: "userState", width: 50, align: 'center', hidden: true },
{ key: false, name: "userCity", datafield: "userCity", width: 50, align: 'center', hidden: true },
{ key: false, name: "notes", datafield: "notes", width: 50, align: 'center', hidden: true },
{
key: false, name: "picture", datafield: "picture", width: 50, align: 'center', formatter: function (cellvalue, options, rowobject) {
return "<img src='" + cellvalue + "' style='width:40px;height:30px'>";
}
},
],
rowNum: 10,
loadonce: true,
rowList: [20, 30, 40],
pager: '#pager1',
toppager: true,
sortname: 'ID',
viewrecords: true,
sortorder: "desc",
caption: "",
width: "1100px",
height: "350px",
onSelectRow: function (id) {
data = $(this).jqGrid("getLocalRow", id);
}
});
$("#InvertoryGrid").jqGrid('setGridParam', { url: "http://localhost:97/Service1.svc/UsedMotoCycleMaint/kc-1", datatype: "json", page: 1 }).trigger("reloadGrid");
$("#InvertoryGrid").jqGrid('navGrid', '#pager2', { cloneToTop: true, del: false, add: false, edit: false, search: false });
};
</script>
</head>
<body leftMargin="0" topMargin="0">
<table style="font-size:9pt;width:90%;" border="0" height="250px" align="center">
<tr>
<td valign="top">
<table border="0" width="84%" align="center">
<tr>
<td>
<div id="pager1"></div>
<table id="InvertoryGrid" align="right"></table>
<div id="pager1"></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>