JQ GRID PAGING TO SERVER SIDE.
Hi friends,
I am using below code to load jq grid. How can I achieve pagging to server side.
Below is my code.
</script>
<script type="text/javascript">
var firstClick = true; // << Outside the click handler
$(document).ready(function () {
$('#Button1').click(function () {
jQuery('#dataGrid').jqGrid('clearGridData');
$("#dataGrid").jqGrid("setGridParam", { postData: { mfrmdt: document.getElementById('txtDateFrom').value, mTodt: document.getElementById('txtDateTo').value, mitem: document.getElementById('ddlItemCode').value, mwarehouse: document.getElementById('ddlWareHouse').value, mzone: document.getElementById('ddlZone').value, mrack: document.getElementById('ddlRack').value, mbin: document.getElementById('ddlBin').value, mou: document.getElementById('DropDownListOU').value, mcustcode: document.getElementById('ddlCustomer').value } }, { datatype: "json" }, { pager: '#pagingGrid' }, { pginput: true }, { pgbuttons: true }, { gridview: true }, { viewrecords: true }, { serializeGridData: function (postData) { return JSON.stringify(postData); } }, {
jsonReader: {
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.d.length; },
root: function (obj) { return obj.d; },
repeatitems: false,
id: "0"
}
})
.trigger("reloadGrid", [{ page: 1, current: true }]);
});
})
$(function () {
$('#Button1').click(function (event) {
debugger
event.preventDefault();
firstClick = false;
var id = document.getElementById('txtDateFrom').value;
$("#dataGrid").jqGrid({
url: 'InwardRegister.aspx/GetDetails',
datatype: 'json',
mtype: 'POST',
postData: { mfrmdt: document.getElementById('txtDateFrom').value, mTodt: document.getElementById('txtDateTo').value, mitem: document.getElementById('ddlItemCode').value, mwarehouse: document.getElementById('ddlWareHouse').value, mzone: document.getElementById('ddlZone').value, mrack: document.getElementById('ddlRack').value, mbin: document.getElementById('ddlBin').value, mou: document.getElementById('DropDownListOU').value, mcustcode: document.getElementById('ddlCustomer').value },
serializeGridData: function (postData) {return JSON.stringify(postData);
},
ajaxGridOptions: { contentType: "application/json" },
loadonce: false,
datatype:"json",
navOptions: { reloadGridOptions: { fromServer: true } },
jsonReader: {
repeatitems: false,
root: function (obj) { return obj; },
page: function (obj) { return $("#tblVendorData").jqGrid('getGridParam', 'page'); },
total: function (obj) { return Math.ceil(obj.length / $("#tblVendorData").jqGrid('getGridParam', 'rowNum')); },
records: function (obj) { return obj.length; }
},
shrinkToFit: false,
width: 1050,
height: 200,
colNames: ['Inward No.', 'Inward Date', 'Transporter Name', 'Customer Name', 'Vehicle No.', 'ItemCode', 'ItemName', 'UOM', 'Invoice / Doc No.', 'Invoice / Doc Date',
'Reason', 'Doc Qty', 'Damaged Qty', 'Net Qty', 'Doc Amount', 'Actual Weight', 'Charge Weight', 'LOT No./Sr No.', 'Warehouse', 'Zone',
'Rack', 'Bin', 'ItemSerialNo', 'Length', 'Width', 'Height', 'Packing Type', 'Remark', 'Consigner/Vender', 'Consignee', 'Reference No.1', 'Reference No.2'],
colModel: [
{ name: 'InwardNo', index: 'InwardNo', width: 80 },
{ name: 'InwardDate', index: 'InwardDate', width: 140, formatter: 'date', formatoptions: { newformat: 'd/m/Y' } },
{ name: 'TransporterName', index: 'TransporterName', width: 160 },
{ name: 'CustomerName', index: 'CustomerName', width: 180 },
{ name: 'VehicleNo', index: 'VehicleNo', width: 180 },
{ name: 'ItemCode', index: 'ItemCode', width: 180 },
{ name: 'ItemName', index: 'ItemName', width: 80 },
{ name: 'UOM', index: 'UOM', width: 140 },
{ name: 'DocNo', index: 'DocNo', width: 160 },
{ name: 'DocDate', index: 'DocDate', width: 180, formatter: 'date', formatoptions: { newformat: 'd/m/Y' } },
{ name: 'reason', index: 'reason', width: 180 },
{ name: 'DocQty', index: 'DocQty', width: 180 },
{ name: 'DamagedQty', index: 'DamagedQty', width: 160 },
{ name: 'NetQty', index: 'NetQty', width: 180 },
{ name: 'DocAmount', index: 'DocAmount', width: 180 },
{ name: 'ActualWeight', index: 'ActualWeight', width: 180 },
{ name: 'ChargeWeight', index: 'ChargeWeight', width: 80 },
{ name: 'LOTNo', index: 'LOTNo', width: 140 },
{ name: 'Warehouse', index: 'Warehouse', width: 160 },
{ name: 'Zone', index: 'Zone', width: 180 },
{ name: 'rack', index: 'rack', width: 180 },
{ name: 'Bin', index: 'Bin', width: 180 },
{ name: 'ReferanceNo', index: 'ReferanceNo', width: 160 },
{ name: 'length', index: 'length', width: 180 },
{ name: 'width', index: 'width', width: 180 },
{ name: 'height', index: 'height', width: 180 },
{ name: 'PackingType', index: 'PackingType', width: 80 },
{ name: 'Remark', index: 'Remark', width: 140 },
{ name: 'Consigner', index: 'Consigner', width: 160 },
{ name: 'Consignee', index: 'Consignee', width: 80 },
{ name: 'ReferenceNo1', index: 'ReferenceNo1', width: 140 },
{ name: 'ReferenceNo2', index: 'ReferenceNo2', width: 160 }
],
pager: '#pagingGrid',
rowList: [50,500,1000, 'All'],
loadComplete: function (data) {
$(".ui-pg-selbox option[value='All']").val(10000000);
},
viewrecords: true,
gridview: true,
pginput: true,
pgbuttons: true,
jsonReader: {
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.d.length; },
root: function (obj) { return obj.d; },
repeatitems: false,
id: "0"
},
caption: 'Inward Register Details'
});
$('#dataGrid').jqGrid('navGrid', '#pagingGrid', {
search: true,
searchtext: "Search", // Make the Search icon have a "Search" label next to it
edit: false,
add: false,
del: false,
refresh: false
},
{}, // default settings for edit
{}, // default settings for add
{}, // delete
{
closeOnEscape: true, closeAfterSearch: true, ignoreCase: true, multipleSearch: false, multipleGroup: false, showQuery: false,
sopt: ['cn', 'eq', 'ne'],
defaultSearch: 'cn'
})
});
})
</script>
Your help my appreciated.
Regards,
Nandkumar Satpute.