Displaying a Blank JQGrid with Column Headers - asp.net-mvc

I want to display JQGrid with all column headers but without any data rows when the page loads.
Based upon user selection through autocomplete i want to populate the JqGrid with data.
The problem is that each time during pageload the grid is automatically populated.
How can i get around this ?
This is how i am using the grid with VS2008 MVC2
jQuery('#jgrid').jqGrid({
autowidth: true,
altRows: true,
altclass: 'grdAltRwClr',
datatype: 'xml',
forceFit: true,
gridview: true,
height: 290,
mtype: 'post',
rowList: [10, 20, 30],
rowNum: 10,
pager: '#pager',
pagerpos: 'right',
recordpos: 'left',
rownumbers: false,
scrollrows: false,
sortname: 'roledtlid',
toolbar: [true, "top"],
url: rootPath + 'RoleDetail/JGridData',
beforeSelectRow: function(rowid, e) { return false; },
gridComplete: function() { GridComplete() },
colModel: [
{ name: 'act', label: 'View', resizable: false, search: false, sortable: false, title: false, width: 6, index: 'act' }
, { name: 'roledtlid', label: 'R.Detail id', width: 15, index: 'roledtlid' }
, { name: 'roleid', label: 'Role id', width: 10, index: 'roleid' }
, { name: 'rolename', label: 'Role Name', width: 25, index: 'rolename' }
, { name: 'pageid', label: 'Page ID', width: 10, index: 'pageid' }
, { name: 'pgname', label: 'Page Name', width: 30, index: 'pgname' }
, { name: 'canadd', label: 'Add', width: 10, index: 'canadd' }
, { name: 'canedit', label: 'Edit', width: 10, index: 'canedit' }
, { name: 'candel', label: 'Delete', width: 10, index: 'candel' }
, { name: 'canview', label: 'View', width: 10, index: 'canview' }
]
});
Thanks

Don't provide a url. Instead set your datatype to "local" and use code similar to the following:
var mySearchData = // Get your search data...
$.post('#Url.Action("Getars")', mySearchData, function(gridData) {
var rowIds = $('#carGrid').jqGrid('getDataIDs');
for (var i = 0, len = rowIds.length; i < len; i++) {
var currRow = rowIds[i];
$('#carGrid').jqGrid('delRowData', currRow);
}
$('#carGrid').jqGrid('setGridParam', { data: gridData }).trigger('reloadGrid');
}).error(function (jqXHR, textStatus) {
app.showErrorAlert(jqXHR.responseText);
});
}

Related

jqgrid not showing any results when count exceeds ~9000

I am using jqgrid version 4.1.2 with MVC4, using loadonce option. When the search result's count exceeds approximately 9000 records, no data is shown up on the grid.
What might be the issue?
Here is the JS code: Update 1
function showCompletedGrid() {
// Set up the jquery grid
$("#jqTableCompleted").jqGrid({
// Ajax related configurations
url: jqDataUrl,
datatype: "json",
mtype: "POST",
loadonce: true,
loadtext: 'Loading Data please wait ...',
postData: { strUserName: function () { return $('#ddlUserName :selected').val(); },
strFunctionName: function () { return $('#ddlOPMSFunction :selected').text(); },
strProcName: function () { return $('#ddlOPMSProcess :selected').text(); },
strCategory: function () { return $('#ddlSearchCategory :selected').text(); },
strWorkType: function () { return $('#ddlSearchWorkType :selected').text(); },
strRequestNumber: function () { return $('#txtRequestNo').val(); },
strStatus: function () { return $('#ddlSearchStatus :selected').text(); },
strFromDate: function () { return $('#txtFromDate').val().toString(); }, //datepicker('getDate'),
strToDate: function () { return $('#txtToDate').val().toString(); }, //datepicker('getDate'),
strAction: "Closed"
},
autowidth: true,
shrinkToFit: true,
// Specify the column names
colNames: ["S.No.", "User Name", "Category", "Work Type", "Request Number", "Status", "Time Spent", "RE", "GUID", "Marked for Correction", "Correction Complete", "Reason", "Task Type", "acf2id", "Created Date", "Action", "IsTeam"],
// Configure the columns
colModel: [
{ name: "SNo", index: "SNo", sorttype: 'int', width: 100, align: "left", hidden: true, sortable: true, search: true, searchoptions: { sopt: ['eq']} },
{ name: "UserName", index: "UserName", width: 200, align: "left", sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "Category", index: "Category", width: 200, align: "left", sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "WorkType", index: "WorkType", width: 200, align: "left", sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "RequestNumber", index: "RequestNumber", width: 200, align: "left", sortable: true, search: true, searchoptions: { sopt: ['cn']} },
{ name: "Status", index: "Status", width: 200, align: "left", sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "TimeSpent", index: "TimeSpent", width: 200, align: "left", sortable: true, search: true },
{ name: "RE", index: "RE", width: 200, align: "left", sortable: true, search: true },
{ name: "GUID", index: "GUID", sortable: false, search: false, width: 200, align: "left", hidden: true },
{ name: "MarkCorrection", index: "MarkCorrection", width: 200, align: "left", hidden: true, sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "CorrectionComplete", index: "CorrectionComplete", width: 200, align: "left", hidden: true, sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "Reason", index: "Reason", width: 200, align: "left", hidden: true, sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "TaskType", index: "TaskType", width: 200, align: "left", sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "acf2id", index: "acf2id", width: 200, align: "left", hidden: true, sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "CreatedDate", index: "CreatedDate", width: 200, align: "left", hidden: false, search: false },
{ name: 'Actions', sortable: false, search: false, fixed: true, align: 'center', formatter: returnHyperLinkCompleted },
{ name: 'IsTeam', sortable: false, hidden: true, search: false, fixed: true, align: 'center' }
],
ignoreCase: true,
//width: 1250,
height: 150,
// Paging
toppager: true,
pager: $("#jqTableCompletedPager"),
//rowTotal: 200,
rowNum: 20,
rowList: [20, 15, 10, 5],
viewrecords: true,
emptyrecords: "",
hiddengrid: true,
// Default sorting
sortname: "SNo",
sortorder: "asc",
// Grid caption
caption: "Closed",
loadComplete: function (data) {
var RE;
var TimeSpent;
var rowIDs = jQuery("#jqTableCompleted").jqGrid('getDataIDs');
for (var i = 0; i < rowIDs.length; i++) {
var rowID = rowIDs[i];
var row = jQuery('#jqTableCompleted').jqGrid('getRowData', rowID);
RE = hmsToSecondsOnly(row.RE);
RE = (0.2 * RE) + RE;
TimeSpent = hmsToSecondsOnly(row.TimeSpent);
if (TimeSpent > RE && RE > 0) {
$(row).removeClass('ui-widget-content');
$(row).removeClass('ui-state-highlight');
$("#jqTableCompleted tr[id='" + rowID + "']").addClass('myColor');
}
}
}
}).navGrid("#jqTableCompletedPager",
{ refresh: true, add: false, edit: false, del: false },
{}, // settings for edit
{}, // settings for add
{}, // settings for delete
{sopt: ["cn"]}
);
$("#jqTableCompleted").jqGrid('navGrid', '#jqTableCompletedPager', { del: false, add: false, edit: false, search: false });
$("#jqTableCompleted").jqGrid('filterToolbar', { searchOnEnter: false, searchOperators: true });
$("#jqTableCompleted").jqGrid('navButtonAdd', '#jqTableCompletedPager',
{ caption: "Export to Excel", buttonicon: "ui-icon-extlink", title: "Export", id: "btnExport",
onClickButton: function (evt) {
var UserName = $('#ddlUserName option:selected').val();
var RequestNumber = $('#txtRequestNo').val();
var FunctionName = encodeURIComponent($('#ddlOPMSFunction option:selected').text());
var ProcessName = encodeURIComponent($('#ddlOPMSProcess option:selected').text());
var Category = $('#ddlSearchCategory option:selected').text();
var WorkTypeName = $('#ddlSearchWorkType option:selected').text();
var SearchStatus = $('#ddlSearchStatus option:selected').text();
var TransactionStartTS = $('#txtFromDate').val().toString();
var TransactionEndTS = $('#txtToDate').val().toString();
window.open("../Search/Export?UserName=" + UserName + "&RequestNumber=" + RequestNumber + "&FunctionName=" + FunctionName + "&ProcessName=" + ProcessName + "&Category=" + Category + "&WorkTypeName=" + WorkTypeName + "&SearchStatus=" + SearchStatus + "&TransactionStartTS=" + TransactionStartTS + "&TransactionEndTS=" + TransactionEndTS + "&ActionName=" + "Closed");
}
});
}
Although the data is being returned and in the correct format, from the controller, as follows, the grid does not show any result.
var jsonData = new
{
page = page,
rows = data
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
Also is there any limit on number of records or dependency on the browser when returning all the data from server using the loadonce option?
Any help would be much appreciated. Thanks.
Finally I found the solution for the above problem by tracing the request in Fiddler, in the response title following error was shown:
Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property.
Upon searching for the above error, I found a workaround:
Here
Basically the problem area was not the jqGrid, but was MaxJsonLength property of JavaScriptSerializer which defaults to 2097152 characters ~ 4 MB of data. Source: MaxJsonLength
To get it working, I replaced the following code in my Action method:
return Json(jsonData, JsonRequestBehavior.AllowGet);
with:
var jsonResult = Json(jsonData, JsonRequestBehavior.AllowGet);
jsonResult.MaxJsonLength = int.MaxValue;
return jsonResult;
Thanks.

get unformatted value of cell in jqgrid as parameter

I am trying to get the value of a cell to pass as a parameter in an ajax call for another column in the grid. The cell value I need is formatted to return a url so when I select it it is passing the url instead of the batchID value.
How can I access the value of BatchID without the formatter applied?
$(function () {
$('#search').html('');
$('#grid').GridUnload();
Grid.Home.Grid.setupGrid($('#grid'), $('#pager'), $('#search'));
});
Grid.Home.Grid = {
setupGrid: function (grid, pager, search) {
grid.jqGrid({
colNames: ['Batch ID', 'Job Start Date', 'Job Finish Date', 'Contacts', 'Statements', 'Selected', 'Sent', 'Queued', 'Action'],
colModel: [
{ name: 'BatchID', index: 'BatchID', width: 35, formatter: batch },
{ name: 'JobStartDate', index: 'JobStartDate', width: 55, sortable: false, search: false, formatoptions: { srcformat: 'y/m/dTH:i:s', newformat: 'm/d/Y g:i:s A'} },
{ name: 'JobFinishDate', index: 'JobFinishDate', width: 55, sortable: false, search: false, formatoptions: { srcformat: 'y/m/dTH:i:s', newformat: 'm/d/Y g:i:s A'} },
{ name: 'Contacts', index: 'Contacts', width: 20, align: 'right', sortable: false, search: false },
{ name: 'Statements', index: 'Statements', width: 20, align: 'right', sortable: false, search: false }, //'currencyFormatter' },
{name: 'Selected', index: 'Selected', width: 20, align: 'right', sortable: false, search: false },
{ name: 'Sent', index: 'Sent', width: 30, sortable: false, search: false, sortable: false, search: false },
{ name: 'Queued', index: 'Queued', width: 30, sortable: false, search: false },
{ name: 'Action', index: 'Action', width: 50, sortable: false, search: false, formatter: action}
],
loadonce: false,
pager: '#pager',
sortname: 'BatchID',
sortorder: "desc",
onCellSelect: function (rowid, cellcontent, e) {
if (cellcontent == '8') {
var rowObject = grid.getRowData(rowid);
if (rowObject.Action === 'Add To Queue'){
$.ajax({
type: 'POST',
url: '<%= Url.Action("UpdateBatch") %>',
data: { BatchID: rowObject.BatchID },
beforeSend: function (xhr) {
blockElement($('.grid'));
},
complete: function (xhr, status) {
unblockElement($('.grid'));
},
success: function (data) {
var title = $('<h6>', { html: data.Title, 'class': 'jgrowl-header' });
$.jGrowl(data.Message, {
theme: 'ui-state-highlight',
life: 5000,
beforeOpen: function (e, m, o) {
e.children('.header').html(title);
}
});
grid.trigger("reloadGrid");
}
}); }
};
},
url: '<%= Url.Action("GetBatchList") %>'
}).navGrid('#pager', { edit: false, add: false, del: false, search: false, refresh: true });
grid.filterToolbar({ stringResult: true, searchOnEnter: false });
}
};
function action(cellvalue, options, rowObject) {
if (rowObject.Action == 'Add To Queue'){
options.colModel.classes = 'show-link';
return 'Add To Queue'
}
else {
options.colModel.classes = '';
return '';
}
};
function batch(cellvalue, options, rowObject) {
var t = rowObject.BatchID;
return '' + t + ' ';
};
</script>
I used jsonmap and added another column that was hidden to hold the value of batchID unformatted. Now the grid looks like this.
Grid.Home.Grid = {
setupGrid: function (grid, pager, search) {
grid.jqGrid({
colNames: ['Batch', 'Job Start Date', 'Job Finish Date', 'Contacts', 'Statements', 'Selected', 'Sent', 'Queued', 'Action', ''],
colModel: [
{ name: 'BatchIDLink ', index: 'BatchID', jsonmap: 'BatchID', width: 35, formatter: link },
{ name: 'JobStartDate', index: 'JobStartDate', width: 55, sortable: false, search: false, formatoptions: { srcformat: 'y/m/dTH:i:s', newformat: 'm/d/Y g:i:s A'} },
{ name: 'JobFinishDate', index: 'JobFinishDate', width: 55, sortable: false, search: false, formatoptions: { srcformat: 'y/m/dTH:i:s', newformat: 'm/d/Y g:i:s A'} },
{ name: 'Contacts', index: 'Contacts', width: 20, align: 'right', sortable: false, search: false },
{ name: 'Statements', index: 'Statements', width: 20, align: 'right', sortable: false, search: false }, //'currencyFormatter' },
{name: 'Selected', index: 'Selected', width: 20, align: 'right', sortable: false, search: false },
{ name: 'Sent', index: 'Sent', width: 30, sortable: false, search: false, sortable: false, search: false },
{ name: 'Queued', index: 'Queued', width: 30, sortable: false, search: false },
{ name: 'Action', index: 'Action', width: 50, sortable: false, search: false, formatter: queue },
{ name: 'BatchIDVal', index: 'BatchID', jsonmap: 'BatchID', hidden: true }
],

issue in showing pager after reloading the jqxgrid data on click event

I am trying to reload the grid on click event. Here is my code for grid
var source = {
datatype: "json",
datafields: [
{ name: 'sno' },
{ name: 'bid' },
{ name: 'city' },
{ name: 'booking_date' },
{ name: 'amount' },
{ name: 'customer_contact' },
{ name: 'user_name' },
{ name: 'trip_type' },
{ name: 'comments' },
{ name: 'action' },
],
cache: false,
url: 'order_details.php?flag=2&start_date='+start_date_param+'&end_date='+end_date_param,
data: {
pagesize:50
},
root: 'Rows',
//sortcolumn: 'area',
// sortdirection: 'asc',
beforeprocessing: function (data) {
source.totalrecords = data[0].TotalRows;
}
};
dataadapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 1100,
source: dataadapter,
theme: 'classic',
autoheight: true,
pageable: true,
pagesize:50,
enablebrowserselection: true,
selectionmode: 'singlecell',
//sortable:true,
virtualmode: true,
rendergridrows: function (params) {
return params.data;
},
columns:
[
{ text: 'No', datafield: 'sno', width: 30 },
{ text: 'Booking Id', datafield: 'bid', width: 90, align: 'center',cellsAlign: 'center' },
{ text: 'City', datafield: 'city', width: 170 },
{ text: 'Car Book Date', datafield: 'booking_date', width: 100, align: 'center',cellsAlign: 'center' },
{ text: 'Amount', datafield: 'amount', width: 60, align: 'right',cellsAlign: 'right' },
{ text: 'Customer Contact', datafield: 'customer_contact', width: 205 },
{ text: 'User Name', datafield: 'user_name', width: 125 },
{ text: 'Trip Type', datafield: 'trip_type', width: 160},
{ text: 'Comments', datafield: 'comments', width: 80, align: 'center',cellsAlign: 'center'},
{ text: 'Action', datafield: 'action', width: 80, align: 'center',cellsAlign: 'center'},
]
});
// event handling on select of date range and click on button show
$("#btn_show").on("click", function (e) {
e.preventDefault();
var start_date_param = $("#start_date").val();
var end_date_param = $("#end_date").val();
source.url = 'order_details.php?flag=2&start_date='+start_date_param+'&end_date='+end_date_param;
dataadapter.dataBind();
});
On click of button "btn_show", I could get the data from page 0, but if I am on page 4, then after click event, my grid pager is remains on page 4 only and data is display for page 0.If I click on next page, then it jumps from page 0 to next page i.e page 5.
Why jqxgrid is not resetting its recordedstartindex and recordedendindex values on dataadapter.dataBind() call after click event?
Do I need to use any other function to reload my complete grid??
I think that the following:
$("#jqxgrid").jqxGrid('gotopage', 0);
should replace
dataadapter.dataBind();
In your code.

Binding JSonArray to JQGrid

I'm new to Jquery and JSon and trying to bind the JSON array result to JQGrid.
I can see the JSON result in Controller but not binding in the View.
Please help me on my code. Probably I was missing in the function in the view
This is the function raise when click on button to load results
function LoadOrganisationGrid() {
var predifnedValue = $("#cmdOrgList").val();
jQuery("#gridOrganisation").jqGrid({
url: 'Home/GetOrganisationGridResults?predefinedMatchID=' + predifnedValue,
datatype: "json",
mtype: 'GET',
width: 1030,
height: 275,
colNames: ['Org_MID', 'P_MID', 'Candidate_Detail', 'CompanyName', 'StreetAddress', 'City', 'PostCode', 'Country', 'EmailDomain', 'VATNo', 'IsLinked', 'NotLinked'],
colModel: [
{ name: 'Org_MatchCandidateID', index: 'Org_MatchCandidateID', width: 60 },
{ name: 'PredefinedMatchID', index: 'PredefinedMatchID', width: 50 },
{ name: 'Candidate_Detail', index: 'Candidate_Detail', width: 150 },
{ name: 'CompanyName', index: 'CompanyName', width: 100, align: "right" },
{ name: 'StreetAddress', index: 'StreetAddress', width: 150, align: "right" },
{ name: 'City', index: 'City', width: 50, align: "right" },
{ name: 'PostCode', index: 'PostCode', width: 80, sortable: false },
{ name: 'Country', index: 'Country', width: 60, sortable: false },
{ name: 'EmailDomain', index: 'EmailDomain', width: 100, sortable: false },
{ name: 'VATNo', index: 'VATNo', width: 50, sortable: false },
{ name: 'Count_IsLinked', index: 'Count_IsLinked', width: 90, sortable: false },
{ name: 'Count_NotLinked', index: 'Count_NotLinked', width: 90, sortable: false }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager5',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption: "Organisations Data"
}).navGrid("#pager5", { edit: false, add: false, del: false });
}
And the controller code below
public JsonResult GetOrganisationGridResults(int predefinedMatchID)
{
var result = new SearchTypeModel
{
ListOrganisationType = GetOrgansiationList(SearchTypeService.GetOrganisationType(predefinedMatchID))
};
return Json(result, JsonRequestBehavior.AllowGet);
}
View code below
<table id="gridOrganisation" ></table>
<div id="pager5"></div>

JqGrid not loading in web page in asp.net mvc3

I am having an aspx engine view where the jqgrid must be loaded.
But the jqgrid is not loading. I tried with breakpoint using firebug but it has not hitted also
In the view
<asp:Content ID="Content3" ContentPlaceHolderID="MetaContent" runat="server">
<table id="jqgprojectnew" style="width: 100%">
</table>
<script type="text/javascript">
var url = '<%#Url.Action("Listmanoj")%>';
var colNames = [
'Orderid',
'Customername',
'Price',
'Quantity',
'Productname',
'Total Including Tax',
'Email',
'Town',
'Country', 'Postcode', 'Homephone','Workphone','Deliveryname','Deliverytown','Deliveryphone','Deliverypostalcode','Shippingmethod'];
var colModel = [
{ name: 'Orderid', index: 'Orderid', align: 'left', width: 20 },
{ name: 'Customername', index: 'Customername', edittype: 'image', align: 'left', width: 70, },
{ name: 'Price', index: 'Price', align: 'left', width: 100, },
{ name: 'Quantity', index: 'Quantity', align: 'left', width: 150, },
{ name: 'Productname', index: 'Productname', align: 'left', width: 150 },
{ name: 'Totalincludingtax', index: 'Totalincludingtax', align: 'left', width: 150 },
{ name: 'Email', index: 'Email', align: 'left', width: 100, },
{ name: 'Town', index: 'Town', align: 'left', width: 100 },
{ name: 'Country', index: 'Country', align: 'left', width: 100, },
{ name: 'Postcode', index: 'Postcode', align: 'left', width: 70 },
{ name: 'Homephone', index: 'Homephone', align: 'left', width: 70 },
{ name: 'Workphone', index: 'Workphone', align: 'left', width: 70 },
{ name: 'Deliveryname', index: 'Deliveryname', align: 'left', width: 70 },
{ name: 'Deliverytown', index: 'Deliverytown', align: 'left', width: 70 },
{ name: 'Deliveryphone', index: 'Deliveryphone', align: 'left', width: 70 },
{ name: 'Deliverypostalcode', index: 'Deliverypostalcode', align: 'left', width: 70 },
{ name: 'Shippingmethod', index: 'Shippingmethod', align: 'left', width: 70 }
];
var sortname = 'Orderid';
var sortorder = 'desc';
SetGrid('#jqgprojectnew', '', url, colNames, colModel, sortname, sortorder, -1);
});
</script>
In the Web page view how it is loading
<script type="text/javascript"> $(document).ready(function () {
$("a.button").button();
var url = '';
var colNames = [
'Orderid',
'Customername',
'Price',
'Quantity',
'Productname',
'Total Including Tax',
'Email',
'Town',
'Country', 'Postcode', 'Homephone','Workphone','Deliveryname','Deliverytown','Deliveryphone','Deliverypostalcode','Shippingmethod'];
Code for setting grid:
function SetGrid(v_gridCtrl,v_pagingCtrl, v_url, v_colNames, v_colModel, v_sortname, v_sortorder, v_Pagesize) {
if (v_Pagesize == undefined)
v_Pagesize = 100;
$(v_gridCtrl).jqGrid({
//url from wich data should be requested
autowidth: true,
url: v_url,
//type of data
datatype: 'json',
//url access method type
mtype: 'POST',
//columns names
colNames: v_colNames,
//columns model
colModel: v_colModel,
//pager for grid
pager: $(v_pagingCtrl),
//enable dynamic scrolling
//scroll: true,
//enable npage request parameter
prmNames: { npage: 'npage' },
//number of rows per page
rowNum: v_Pagesize,
rowList: [10, 30, 60, 90, 100, 150, -1],
loadComplete: function () {
$("option[value=-1]").text('All');
$('#count').html($(v_gridCtrl).getGridParam("reccount"));
},
//initial sorting column
sortname: v_sortname,
//initial sorting direction
sortorder: v_sortorder,
//we want to display total records count
viewrecords: true,
//grid height
height: 400,//'100%',
width: '100%',
scrollOffset: 0,
shrinkToFit: true
});
}
My problems are:
The action method which is used in the jqgrid is not hitind and on load the url action result is empty
Add document.ready() in script
Set url like this:
var url = '/ControllerName/Listmanoj'; //If your controller name is TestController, the url should be '/Test/Listmanoj'
Remove the following section:(why do you need that?)
$(document).ready(function () {
$("a.button").button();
var url = '';
var colNames = [
'Orderid',
'Customername',
'Price',
'Quantity',
'Productname',
'Total Including Tax',
'Email',
'Town',
'Country', 'Postcode', 'Homephone','Workphone','Deliveryname','Deliverytown','Deliveryphone','Deliverypostalcode','Shippingmethod'];
Include setGrid in document.ready().
In short, you script section should look like:
<asp:Content ID="Content3" ContentPlaceHolderID="MetaContent" runat="server">
<table id="jqgprojectnew" style="width: 100%">
</table>
<script type="text/javascript">
$(document).ready(function()
{
//set grid function
function SetGrid(v_gridCtrl,v_pagingCtrl, v_url, v_colNames, v_colModel, v_sortname, v_sortorder, v_Pagesize) {
if (v_Pagesize == undefined)
v_Pagesize = 100;
$(v_gridCtrl).jqGrid({
//url from wich data should be requested
autowidth: true,
url: v_url,
//type of data
datatype: 'json',
//url access method type
mtype: 'POST',
//columns names
colNames: v_colNames,
//columns model
colModel: v_colModel,
//pager for grid
pager: $(v_pagingCtrl),
//enable dynamic scrolling
//scroll: true,
//enable npage request parameter
prmNames: { npage: 'npage' },
//number of rows per page
rowNum: v_Pagesize,
rowList: [10, 30, 60, 90, 100, 150, -1],
loadComplete: function () {
$("option[value=-1]").text('All');
$('#count').html($(v_gridCtrl).getGridParam("reccount"));
},
//initial sorting column
sortname: v_sortname,
//initial sorting direction
sortorder: v_sortorder,
//we want to display total records count
viewrecords: true,
//grid height
height: 400,//'100%',
width: '100%',
scrollOffset: 0,
shrinkToFit: true
});
}// end of set grid function
var url = 'controllername/Listmanoj';
var colNames = [
'Orderid',
'Customername',
'Price',
'Quantity',
'Productname',
'Total Including Tax',
'Email',
'Town',
'Country', 'Postcode', 'Homephone','Workphone','Deliveryname','Deliverytown','Deliveryphone','Deliverypostalcode','Shippingmethod'];
var colModel = [
{ name: 'Orderid', index: 'Orderid', align: 'left', width: 20 },
{ name: 'Customername', index: 'Customername', edittype: 'image', align: 'left', width: 70, },
{ name: 'Price', index: 'Price', align: 'left', width: 100, },
{ name: 'Quantity', index: 'Quantity', align: 'left', width: 150, },
{ name: 'Productname', index: 'Productname', align: 'left', width: 150 },
{ name: 'Totalincludingtax', index: 'Totalincludingtax', align: 'left', width: 150 },
{ name: 'Email', index: 'Email', align: 'left', width: 100, },
{ name: 'Town', index: 'Town', align: 'left', width: 100 },
{ name: 'Country', index: 'Country', align: 'left', width: 100, },
{ name: 'Postcode', index: 'Postcode', align: 'left', width: 70 },
{ name: 'Homephone', index: 'Homephone', align: 'left', width: 70 },
{ name: 'Workphone', index: 'Workphone', align: 'left', width: 70 },
{ name: 'Deliveryname', index: 'Deliveryname', align: 'left', width: 70 },
{ name: 'Deliverytown', index: 'Deliverytown', align: 'left', width: 70 },
{ name: 'Deliveryphone', index: 'Deliveryphone', align: 'left', width: 70 },
{ name: 'Deliverypostalcode', index: 'Deliverypostalcode', align: 'left', width: 70 },
{ name: 'Shippingmethod', index: 'Shippingmethod', align: 'left', width: 70 }
];
var sortname = 'Orderid';
var sortorder = 'desc';
SetGrid('#jqgprojectnew', '', url, colNames, colModel, sortname, sortorder, -1);
});
</script>

Resources