$('#gridInvoiceDocs').jqGrid({
url: 'DocumentDataHandler.ashx?docType=InvoiceDocs',
width: 800,
height: 300,
datatype: “json”,
colNames: [“Ref”, “Product”, “Id”, “Type”, “File”, “Flight”, “eTickets”, “Vouchers”, “Received”, “Created”, “Agent”, “Abta”],
colModel: [
{ name: “BookingReference”, index: “BookingReference”, align: “center” }
, { name: “BookingProduct”, index: “BookingProduct”, align: “center” }
, { name: “DocumentId”, index: “DocumentId”, hidden: true }
, { name: “DocumentType”, index: “DocumentType”, hidden: true }
, { name: “FilePath”, index: “FilePath”, hidden: true }
, { name: “HasFlight”, index: “HasFlight”, align: “Center”, width: 75 }
, { name: “eTicketPageCount”, index: “eTicketPageCount”, align: “Center”, width: 75 }
, { name: “VoucherPageCount”, index: “VoucherPageCount”, align: “Center”, width: 75 }
, { name: “DateRecieved”, index: “DateRecieved”, align: “center”, hidden: true }
, { name: “DateCreated”, index: “DateCreated”, align: “center” }
, { name: “AgentGroup”, index: “AgentGroup” }
, { name: “Abta”, index: “Abta”, align: “center” }
],

jsonReader: { page: “page”, total: “total”, records: “records”, repeatitems: false },
rowNum: 20,
rowList: [20, 50, 100],
sortname: 'DocumentId',
multiselect: true,
rownumbers: true,
pager: $(“#invoiceDocsPager”),
sortorder: “desc”,
caption: “Invoice Documents”
});

$('#gridInvoiceDocs').jqGrid(
'navGrid',
'#invoiceDocsPager',
{ edit: false, add: false, search: true, refresh: true, del: true });