uncaught exception: jqGrid - No such method: navGrid - jqgrid

jqGrid 3.8.1 was working fine than I updated jqGrid 3.8.2. The code started generating error.
Error is : uncaught exception: jqGrid - No such method: navGrid. Below is my code.
Note: If I remove below line than Grid is working fine. Why is that?
jQuery("#lists55").jqGrid('navGrid', '#pagers55', { edit: false, add: false, del: false });
Using it in ASP.NET MVC 3 Razor.
//My Code
<link href="#Url.Content("~/Content/themes/images/jquery-ui-1.8.7.custom.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/ui.jqgrid.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/jquery-ui-1.8.7.custom.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/grid.locale-en.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/jquery.jqGrid.min.js")" type="text/javascript"></script>
jQuery().ready(function () {
jQuery("#lists55").jqGrid({
data: mydata1,
datatype: "local",
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [{ name: 'id', index: 'id', width: 55 },
{ name: 'invdate', index: 'invdate', width: 90 },
{ name: 'name', index: 'name asc, invdate', width: 100 },
{ name: 'amount', index: 'amount', width: 80, align: "right", formatter: 'number' },
{ name: 'tax', index: 'tax', width: 80, align: "right", formatter: 'number' },
{ name: 'total', index: 'total', width: 80, align: "right", formatter: 'number' },
{ name: 'note', index: 'note', width: 150, sortable: false }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pagers55',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption: "JSON Example",
footerrow: true,
userDataOnFooter: true,
altRows: true
});
jQuery("#lists55").jqGrid('navGrid', '#pagers55', { edit: false, add: false, del: false });
});

I suppose that you checked not all jqGrid modules which you needed during the jqGrid dounload. The navGrid function are used mostly for form editing functionality. So you should check "Form Edit" and "Common" modules from the "Editing" block.
If you want to verify which modules you use in the jquery.jqGrid.min.js you can open it with a text editor and you will see in the comment at the begining of the file text (typically in the line 8) starting with the following:
Modules: grid.base.js; jquery.fmatter.js; grid.custom.js; grid.common.js; grid.formedit.js; ...
If you don't find grid.formedit.js, that you really not choose "Form Edit" during the jqGrid downloading.

For anyone coming here from Google, I was was having a similar issue until I found this comment in the jqGrid documentation:
You have to add grid.addons.js script file in head tag
<script src=“plugins/grid.addons.js” type=“text/javascript”></script>
I think this is the only place on the entire internet where this requirement is mentioned.

Related

jqgrid getting error when grid is getting loaded

Jqgrid is able to load the data. But, gviing error when it getting loaded.
Error is at below lin in - jqgrid min version:
k=b.jgrid.formatter.integer||{}
saying unable to get property of undefined null reference
Layout has included script file as follow:
<script src='#Url.Content("~/Scripts/jqgrid/jquery-1.10.2.min.js")' type="text/javascript"></script>
<script src='#Url.Content("~/Scripts/jqgrid/i18n/grid.locale-en.js")' type="text/javascript"></script>
<script src='#Url.Content("~/Scripts/jqgrid/jquery.jqGrid.min.js")' type="text/javascript"></script>
Please help me I m just stuck. and spent 3 hours...
I google and found many link where it syas, locale is not added or add it on first line.. but still not got success.
$('#CategoriesGrdList').jqGrid({
ajaxGridOptions: {
error: function () {
$('#CategoriesGrdList')[0].grid.hDiv.loading = false;
alert('An error has occurred.');
}
},
url: '#Url.Action("GetAllCategoriesList", "Categories")/' + 0,
gridview: true,
autoencode: true,
//public JsonResult GetEnrolls(int adClassSchedID,DateTime attendanceDate,int adProgramID,int syCampusID)
postData: { categoryId: 1 },
//postData: { categoryId: rowID, attendanceDate: $('#AttendanceDate').val(), adProgramID: $('#adProgramID').val(), syCampusID: $('#syCampusID').val() },
datatype: 'json',
jsonReader: { root: 'List', page: 'Page', total: 'TotalPages', records: 'TotalCount', repeatitems: false, id: 'Id' },
mtype: 'GET',
colNames: ['Id', 'Code', 'Description', 'IsActive'],
colModel: [
{ name: 'Id', index: 'Id', hidden: true },
{ name: 'Code', index: 'Code', width: 170 },
{ name: 'Description', index: 'Description', width: 170 },
{ name: 'IsActive', index: 'IsActive', width: 170 }
],
pager: $('#CategoriesGrdPager'),
sortname: 'Code',
rowNum: 40,
rowList: [3, 3, 3],
width: '525',
height: '100%',
viewrecords: true,
beforeSelectRow: function (rowid, e) {
return false;
},
sortorder: 'desc'
}).navGrid('#CategoriesGrdPager', { edit: false, add: false, del: false, search: false, refresh: false });
});
Thanks
First of all you should always use jquery.jqGrid.src.js instead of jquery.jqGrid.min.js in case of some error inside of jqGrid.
I suppose that the reason of the error is missing grid.locale-en.js or other language specific file from i18n folder. The language file should be included before jquery.jqGrid.min.js or jquery.jqGrid.src.js. You should validate whether grid.locale-en.js is really loaded. Undefined $.jgrid.formatter could means only missing grid.locale-en.js (see here).
I recommend you to compare your HTML file (especially <head> part) with the demo HTML file from the jqGrid documentation.

Case sensitive issue when multilevel grouping of 2 or more columns, using version 4.5.4

I saw this link at Ignore case while grouping . So I implemented it and it works great but for some reasons, it doesn't work with certain data.
If I group by Make and Make, there, Chevrolet Tahoe show 3 seperate "Tahoe" rows. How do you allow multiple grouping for it to work?
Source code is found at https://dealerapp-test.bookitout.com/testcase1.html that include jqgridData's data value as it doesn't fit here due to exceeding 30000 characters error. There on that webpage, open up Chevrolet then look for "Tahoe".
Short version here without the jqgridData's value...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- This force IE to use the latest version of HTML, CSS and JavaScript instead of being forced to use 1 specific IE version only -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>....</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui-v1.10.3.themes/redmond/jquery-ui-1.10.3.custom.css" />
<link rel="stylesheet" type="text/css" href="css/jqgrid-v4.5.4/ui.jqgrid.css" />
<script type="text/javascript" src="scripts/jquery-v2.0.0.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-v1.10.3.themes/redmond/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="scripts/jqgrid-v4.5.4/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="scripts/jqgrid-v4.5.4/jquery.jqGrid.src.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var jqgridSpreadsheetId = 'MyInventoryJqgrid_Spreadsheet';
var jqgridPagerId = 'MyInventoryJqgrid_Pager';
var jqgridData = "<<Data not included>>";
//jqgridSpreadsheetId.useJSON = true;
//jqGrid Plugin...
//http://www.trirand.com...
$('#'+jqgridSpreadsheetId).jqGrid({
//url: "jsonResult.json", //jqgridData, //'server.php?q=5',
//datatype: "json",
datatype: 'jsonstring', //'json',
datastr: jqgridData,
colNames: ['Id', 'Accepted-Id', 'Rejected-Message', 'Import Status', 'Stock Number', 'VIN', 'Year', 'Make', 'Model', 'Trim', 'Mileage', 'Purchase Price', 'Stock Date', 'Repair Cost', 'Total Cost', 'Days In Inventory', 'Hidden-Inventory-Tracker-Location-Id', 'Inventory Tracker Location', 'Category'],
colModel:[
{name: 'Id', index: 'Id', sortable: false, width: 0, align: 'left', hidden: true, },
{name: 'AcceptedId', index: 'AcceptedId', sortable: false, width: 0, align: 'left', hidden: true,},
{name: 'RejectedMessage', index: 'RejectedMessage', sorttype: 'text', width: 60, align: 'center', hidden: true, },
{name: 'ImportStatus', index: 'ImportStatus', sorttype: 'text', width: 60, align: 'center' },
{name: 'StockNumber', index: 'StockNumber', sorttype: 'text', align: 'center'},
{name: 'Vin', index: 'Vin', sorttype: 'text', width: 190, align: 'center' },
{name: 'Year', index: 'Year', sorttype: 'int', align: 'center' },
{name: 'Make', index: 'Make', sorttype: 'text', align: 'center' },
{name: 'Model', index: 'Model', sorttype: 'text', align: 'center' },
{name: 'Trim', index: 'Trim', sorttype: 'text', align: 'center' },
{name: 'Mileage', index: 'Mileage', sorttype: 'int', align: 'center', formatter: 'number', formatoptions: { decimalSeparator: '', thousandsSeparator: ',', decimalPlaces: 0, defaultValue: '0' } },
{name: 'PurchasePrice', index: 'PurchasePrice', sorttype: 'currency', align: 'center', formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: '0.00', prefix: '$', suffix: '' } },
{name: 'StockDate', index: 'StockDate', sorttype: 'date', align: 'center', formatter: 'date', formatoptions: { newformat: 'm/d/Y' } },
{name: 'RepairCost', index: 'RepairCost', sorttype: 'currency', align: 'center', formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: '0.00', prefix: '$', suffix: '' } },
{name: 'TotalCost', index: 'TotalCost', sorttype: 'currency', align: 'center', formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: '0.00', prefix: '$', suffix: '' } },
{name: 'DaysInInventory', index: 'DaysInInventory', sorttype: 'int', align: 'center', formatter: 'number', formatoptions: { decimalSeparator: '', thousandsSeparator: ',', decimalPlaces: 0, defaultValue: '1' } },
{name: 'InventoryTrackerLocationId', sortable: false, width: 0, align: 'left', hidden: true,},
{name: 'InventoryTrackerLocation', index: 'InventoryTrackerLocation', sorttype: 'text', align: 'center' },
{name: 'Category', index: 'Category', sorttype: 'text', align: 'center' }
],
rowNum: 1000000000, //-1, //10, //06/13/2013 - It is reported that the use of "-1" broke jqGrid when loadonce:true is used. Alternatively, use the max # of rows...
rowList: [], //#[10,20,30], //Disable page size dropdown...
pager: '#'+jqgridPagerId,
pgbuttons: false, //Disable page control like next, back button...
pgtext: null, //Disable pager text line like "Page 0 of 10"...
viewrecords: false, //Disable current view record text like 'View 1-10 of 100'...
sortname: 'Make ASC, Model',
sortorder: 'ASC',
viewrecords: true,
sortorder: "desc",
ignoreCase: true, //This make the local-search and sorting of values be case insensitive...
caption: "Data Optimization",
height: 400,
grouping: true,
groupingView: {
groupCollapse: true,
groupField: [ 'Make', 'Model' ],
isInTheSameGroup: [ function(x, y) { return String(x).toLowerCase() == String(y).toLowerCase(); } ] //Make it case insensitiive when grouping. (No more seperate column values of same word when groupped)...
}
});
});
</script>
</head>
<body>
<div><table id="MyInventoryJqgrid_Spreadsheet"></table></div>
<div id="MyInventoryJqgrid_Pager"></div>
</body>
</html>
You can fix the problem in very easy way. The property isInTheSameGroup is array like the the property groupField. So you can specify different rules how to group in different grouping level. If you want to makes case insensitive grouping on the both grouping levels you should change
groupingView: {
groupCollapse: true,
groupField: [ 'Make', 'Model' ],
isInTheSameGroup: [
function(x, y) { return String(x).toLowerCase() == String(y).toLowerCase(); }
]
}
to
groupingView: {
groupCollapse: true,
groupField: [ 'Make', 'Model' ],
isInTheSameGroup: [
function(x, y) { return String(x).toLowerCase() === String(y).toLowerCase(); },
function(x, y) { return String(x).toLowerCase() === String(y).toLowerCase(); }
]
}
or to
groupingView: {
groupCollapse: true,
groupField: [ 'Make', 'Model' ],
isInTheSameGroup: [
caseInsensitiveCompare,
caseInsensitiveCompare
]
}
where caseInsensitiveCompare are defined as
var caseInsensitiveCompare = function (x, y) {
return String(x).toLowerCase() === String(y).toLowerCase();
};
By the way the demo from the answer where I suggested the feature isInTheSameGroup originally uses two level grouping and isInTheSameGroup in the demo is array with two callback functions: one callback for one grouping level.

jqGrid's column/row data got offset by 1 column when 1st colModel has (formatoptions: { delOptions: ... })

I noticed when I added a 1st column in colModel as "action" (delete action) along w/ delOptions, all rows in the jqGrid grid (spreadsheet) got moved to the left by 1 column and not matching the column headers. When I took the 1st column in colModel out, all rows in the grid is back to normal. scratching my head
See the before and after effect when you do the following...
1) In colNames array - Remove "Actions" value.
2) In colModel array - Remove the 1st array {} section that contains "actDelete"
Basically, make it a 13 columns grid instead of 14 columns.
Thanks...
<html>
<head>
<title>Testcase</title>
<link rel="stylesheet" type="text/css" href="../css/jquery-ui-v1.10.3.themes/base/minified/jquery-ui.min.css" /> <!-- JQuery UI Plugin -->
<link rel="stylesheet" type="text/css" href="../css/jqgrid-v4.5.0/ui.multiselect.css" /> <!-- Column Chooser for jqGrid Plugin -->
<link rel="stylesheet" type="text/css" href="../css/jqgrid-v4.5.0/ui.jqgrid.css" /> <!-- jqGrid Plugin -->
<style type="text/css">
/* 05/13/2013 - (Override CSS properties to make Column header be text-wrapped & vertical-aligned */
th.ui-th-column div {white-space:normal !important; height:auto !important; padding:2px;}
.ui-jqgrid .ui-jqgrid-resize {height: 100% !important;}
/* 05/13/2013 - (Override CSS properties to make Column header be text-wrapped & vertical-aligned */
.ui-jqgrid tr.jqgrow td {white-space:normal;}
</style>
<script type="text/javascript" src="../scripts/jquery-v2.0.0.min.js"></script>
<script src="../scripts/jquery-ui-v1.10.3/minified/jquery-ui.min.js" type="text/javascript"></script>
<script src="../scripts/jqgrid-v4.5.0/ui.multiselect.js" type="text/javascript"></script>
<script src="../scripts/jqgrid-v4.5.0/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="../scripts/jqgrid-v4.5.0/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var jsonData = {"page":"1","total":"4","records":"35","rows":[{"id":1,"cell":["58456076","100429","1D4GP24R45B190639","2005","Dodge","Grand Caravan Passenger","Minivan 4D","110544","5040.00","2010-10-21","2178.60","7218.60","945"]}]}; var jqgridSpreadsheetId = 'MyInventoryJqgrid_Spreadsheet';
var jqgridPagerId = 'MyInventoryJqgrid_Pager';
$('#' + jqgridSpreadsheetId).jqGrid({
datatype: 'jsonstring',
datastr: jsonData,
colNames: ['Actions', 'Id', 'Stock Number', 'VIN', 'Year', 'Make', 'Model', 'Trim', 'Mileage', 'Purchase Price', 'Stock Date', 'Repair Cost', 'Total Cost', 'Days In Inventory'],
colModel: [
//http://stackoverflow.com/questions/14732234/how-to-delete-row-in-jqgrid...
{ name: 'actDelete', index: 'actDelete', width: 50, align: 'center', sortable: false, formatter: 'actions', formatoptions: { keys: false, editbutton: false, delOptions: { url: '' } } },
{ name: 'Id', index: 'Id', sorttype: 'int', width: 0, align: 'left', hidden: true, },
{ name: 'StockNumber', index: 'StockNumber', sorttype: 'text', width: 100, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
{ name: 'Vin', index: 'Vin', sorttype: 'text', width: 140, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
{ name: 'Year', index: 'Year', sorttype: 'int', width: 50, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
{ name: 'Make', index: 'Make', sorttype: 'text', width: 80, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
{ name: 'Model', index: 'Model', sorttype: 'text', width: 80, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
{ name: 'Trim', index: 'Trim', sorttype: 'text', width: 100, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
{ name: 'Mileage', index: 'Mileage', sorttype: 'int', width: 60, align: 'center', formatter: 'number', formatoptions: { decimalSeparator: '', thousandsSeparator: ',', decimalPlaces: 0, defaultValue: '0' } },
{ name: 'PurchasePrice', index: 'PurchasePrice', sorttype: 'currency', width: 80, align: 'center', formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: '0.00', prefix: '$', suffix: '' } },
{ name: 'StockDate', index: 'StockDate', sorttype: 'date', width: 90, align: 'center', formatter: 'date', formatoptions: { newformat: 'm/d/Y' } },
{ name: 'RepairCost', index: 'RepairCost', sorttype: 'currency', width: 80, align: 'center', formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: '0.00', prefix: '$', suffix: '' } },
{ name: 'TotalCost', index: 'TotalCost', sorttype: 'currency', width: 80, align: 'center', formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: '0.00', prefix: '$', suffix: '' } },
{ name: 'DaysInInventory', index: 'DaysInInventory', sorttype: 'int', width: 65, align: 'center', formatter: 'number', formatoptions: { decimalSeparator: '', thousandsSeparator: ',', decimalPlaces: 0, defaultValue: '1' } }
],
localReader: { page: function (object) { return object.page !== undefined ? obj.page : "0"; } },
pager: '#' + jqgridPagerId,
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'StockDate', sortorder: 'desc',
viewrecords: true,
//gridview: true,
caption: 'Inventory',
width: 1022,
shrinkToFit: false,
height: 400,
sortable: true,
grouping: true,
loadonce: true,
loadError: function (xhr, st, err) { alert("An error had occurred, please try again or notify webmaster of this error"); },
});
});
</script>
</head>
<body>
<div id="divWebLayout1">
<table id="MyInventoryJqgrid_Spreadsheet"></table>
<div id="MyInventoryJqgrid_Pager" style="text-align:center;"></div>
</div>
</body>
</html>
All column of jqGrid are just columns. It is not important whether the column in hidden or be used for formatter: 'actions'. In case of usage standard JSON format (with repeatitems: true in jsonReader) you the items from "cell":[...] array will be just mapped to the columns in colModel during reading.
There are some ways to fix the problem. You can modify your server part so that item
"cell":["58456076","100429","1D4GP24R45B190639","2005","Dodge", ...]
will be changed to
"cell":["","58456076","100429","1D4GP24R45B190639","2005","Dodge", ...]
It's clear that such changes are mot nice because formatter: 'actions' have absolutely another meaning as other columns.
If you load the data from the server using datatype:'json' and url:'../websrvc/jqGrid.ashx' then you can use beforeProcessing to make the same modification without any changes of the server code. You can use unshift method for example. The code will be like
beforeProcessing: function (data) {
var rows = data.rows,
l = rows ? rows.length : 0,
i;
for (i = 0; i < l; i++) {
rows[i].cell.unshift(""); // insert empty string as the first element
}
}
Another way to read original JSON data from the server is usage of jsonReader: {repeatitems: true} and jsonmap property inside of colModel. You need add jsonmap: "cells.0" to the column "Id", add jsonmap: "cells.1" to the column "StockNumber" and so on. In the same way you can use jsonmap defined as functions. See the answer for code examples.
I recommend you include additionally key: true property to 'Id' column and add id: "Id" property to jsonReader. I hope the value is unique for all rows of the grid. In the case the value from the column will be used as rowid. The value "id":1 will be ignored in the case. You should uncomment gridview: true too.

jqGrid not displaying row in MVC 4.0

I've tried and I finally give up trying to figure out why my jqGrid doesn't display data.
Let me try and go step-by-step:
The below is what is included for the script...
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link href="../../Content/themes/redmond/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/redmond/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/base/jquery.ui.button.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script src="../../Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
The JSON returned:
{
"total": 1,
"page": 1,
"records": 1,
"rows": [
{
"id": "0001",
"cell": [
"0001",
"XXXXX",
"XXXX",
"XXX",
"XXX",
"XXXXX",
"XXXX",
"7/27/2012 1:46:22 PM",
"XXXXX",
"7/30/2012 3:48:25 PM"
]
}
]
}
The jqGrid Code is as follows:
jQuery(function ($) {
jQuery('#tblManageApplication').jqGrid({
url: '/AdminView/ManageApplicationsJQGridData',
datatype: 'json',
loadError: function (xhr, status, error) { alert(status + " " + error); },
mtype: 'GET',
colNames: ['Application ID', 'Application Name', 'Application Description', 'Country Code', 'Country Name', 'Source Indicator Code', 'Insert User ID', 'Insert User Timestamp', 'Update User ID', 'Update User Timestamp'],
colModel: [
{ name: 'ApplicationID', jsonmap: 'cell.ApplicationID', width: 150 },
{ name: 'ApplicationName', jsonmap: 'cell.ApplicationName', width: 200 },
{ name: 'ApplicationDescription', jsonmap: 'cell.ApplicationDescription', width: 250 },
{ name: 'CountryCode', jsonmap: 'cell.CountryCode', width: 100 },
{ name: 'CountryName', jsonmap: 'cell.CountryName', width: 100 },
{ name: 'SourceIndicatorCode', jsonmap: 'cell.SourceIndicatorCode', width: 100 },
{ name: 'InsertUserID', jsonmap: 'cell.InsertUserID', width: 100 },
{ name: 'InsertUserTimestamp', jsonmap: 'cell.InsertUserTimestamp', width: 100, formatter: 'date', formatoptions: { newformat: 'd-m-Y' }, datefmt: 'd-m-Y' },
{ name: 'UpdateUserID', jsonmap: 'cell.UpdateUserID', width: 100 },
{ name: 'UpdateUserTimestamp', jsonmap: 'cell.UpdateUserTimestamp', width: 175, formatter: 'date', formatoptions: {newformat: 'd-m-Y'}, datefmt: 'd-m-Y' }
],
pager: jQuery('#pager'),
sortName: 'ApplicationID',
rowNum: 10,
jsonReader: { repeatitems: false },
rowList: [10, 20, 50],
sortorder: 'desc',
height: 300,
width: 1200,
caption: 'Manage Applications',
onCellSelect: function (rowid, index, contents, event) {
alert('onCellSelect: ' + index + ' : ' + contents);
},
success: function (data, textStatus) {
if (textStatus == 'success') {
alert('Successful');
}
},
error: function (data, textStatus) {
alert('An error has occurred');
}
});
});
Wanted to add the corresponding HTML for your reference:
<table id="tblManageApplication"></table>
<div id="pager"></div>
Any help will be greatly appreciated.
first, can you confirm that that data you are sending from controller and colModal names are same alphabetically?
second check your json reader
check this link
http://www.ok-soft-gmbh.com/jqGrid/ipInfo.htm i think you need to specify a couple of things here like id and records.
The main error in your code is the usage of jsonReader: { repeatitems: false } option and jsonmap in the case where you don't need there at all. You produce the data in the standard format. So you have to remove the options to be able to fill the grid.
Additionally I would recommend you to change the data format to ISO 8601 format (you can use "o" format of DateTime on the server code) or at least define correct srcformat:
formatoptions: {srcformat: 'm/d/Y g:i:s A', newformat: 'd-m-Y'}
The demo demonstrate that the changes which I described above working.

jqgrid 3.8.2 filterToolbar - textboxes disappear when cols are reordered

I have implemented a jqgrid using the code below. The grid works fine, but when I drag and change the order of columns (reorder), the textboxes below the last column(s) disappear on each reorder.
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '#Url.Content("/Contacts/DynamicGridData/")',
datatype: 'json',
mtype: 'GET',
colNames: ['Last Name', 'First Name', 'Country', 'Category'],
colModel: [
{ name: 'LastName', index: 'LastName', align: 'left' },
{ name: 'FirstName', index: 'FirstName', align: 'left' },
{ name: 'CountryId', index: 'CountryId', align: 'left' },
{ name: 'CategoryId', index: 'CategoryId', align: 'left'}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'LastName',
sortorder: "asc",
viewrecords: true,
sortable: true,
loadonce: true,
ignoreCase: true,
gridview: true,
autowidth: true,
rownumbers: true,
imgpath: '#Url.Content("~/Content/themes/jqgrid/smoothness/images")'
});
jQuery("#list").jqGrid('navGrid', '#pager', { add: false, edit: false, del: false }, {}, {}, {}, { multipleSearch: true });
jQuery("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false });
jQuery("#list").jqGrid('navButtonAdd', "#pager", { caption: "", title: "Toggle Search Bar", buttonicon: 'ui-icon-pin-s', onClickButton: function () { $("#list")[0].toggleToolbar() } });
});
</script>
<table id="list" class="scroll"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
How can this be solved?
I can't reproduce your problem. See here my test. Which version of jQuery UI and jQuery you use?
Small remarks: The parameter imgpath is deprecated since many jqGrid releases and you should remove it. In the same way the class="scroll" will also not used. So you can reduce the HTML to
<table id="list"></table>
<div id="pager"></div>

Resources