jqGrid not displaying row in MVC 4.0 - jqgrid

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.

Related

Column Chooser icon not visible in pager bar

Does anyone know why is the Column Chooser icon not visible in jqGrid's pager bar? I'm using free-jqGrid v4.9.2
[Html]
<script src="~/Member/Scripts/jquery-ui-v1.10.3.themes/redmond/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script> <!-- JQuery UI -->
<script src="~/Member/Scripts/jqgrid-v4.9.2/i18n/grid.locale-en.js" type="text/javascript"></script> <!-- jqGrid Plugin -->
<script src="~/Member/Scripts/jqgrid-v4.9.2/jquery.jqgrid.min.js" type="text/javascript"></script> <!-- jqGrid Plugin -->
<script src="~/Member/Scripts/jqgrid-v4.9.2/ui.multiselect.min.js" type="text/javascript"></script> <!-- jqGrid Plugin -->
<div id="BatchReportJqgrid" class="GridViewForceCenterInAllWebBrowsers" style="padding-top:2px;padding-bottom:20px;">
<div><table id="BatchReportJqgrid_Spreadsheet"></table></div>
<div id="BatchReportJqgrid_Pager"></div>
</div>
[Javascript]
var _httpHost = window.location.host; //This give you "localhost:<<port #>>" on local machine...
var _dealerAccountId = parmDealerAccountId;
var _dealerUserId = parmDealerUserId;
var _dealerBranchAccountId = parmDealerBranchAccountId;
var _jqgridSpreadsheetId = "BatchReportJqgrid_Spreadsheet";
var _jqgridPagerId = 'BatchReportJqgrid_Pager';
var _jqgridLayoutWidth = 1022;
var _jqgridDialogColumnChooserWidth = 800;
//===============================================================================
//jqGrid - Initialize...
//===============================================================================
$('#' + _jqgridSpreadsheetId).jqGrid({
url: "https://" + _httpHost + "/WebApi/Webpages/Member/BatchFooReport/JqgridSpreadsheetLookup/" + _dealerAccountId + "/" + _dealerUserId + "/" + _dealerBranchAccountId + "",
datatype: "local",
mtype: 'POST',
jsonReader: { repeatitems: false },
postData: {},
colName: ["StockNumber", "VIN", "Year", "Make", "Model", "Trim"],
colModel: [
{ jsonmap: function (o) { return o.cell[0]; }, name: 'Stock Number', index: 'StockNumber', sortable: true, sorttype: 'text', align: 'center' },
{ jsonmap: function (o) { return o.cell[1]; }, name: 'Vin', index: 'Vin', sortable: true, sorttype: 'text', width: 190, align: 'center' },
{ jsonmap: function (o) { return o.cell[2]; }, name: 'Year', index: 'Year', sortable: true, sorttype: 'int', align: 'center' },
{ jsonmap: function (o) { return o.cell[3]; }, name: 'Make', index: 'Make', sortable: true, sorttype: 'text', align: 'center'},
{ jsonmap: function (o) { return o.cell[4]; }, name: 'Model', index: 'Model', sortable: true, sorttype: 'text', align: 'center' },
{ jsonmap: function (o) { return o.cell[5]; }, name: 'Trim', index: 'Trim', sortable: true, sorttype: 'text', align: 'center' },
],
pager: '#' + _jqgridPagerId,
emptyrecords: "No vehicles found that match your search.",
loadtext: "Locating vehicles, please wait...",
recordtext: "Viewing {0} - {1} of {2} vehicles.",
rowNum: 25,
viewrecords: true,
caption: "Batch Foo Report",
rowList: [25, 50, 100],
loadonce: false,
width: _jqgridLayoutWidth,
height: 400,
loadError: function (xhr, status, error) {
alert("Error occured while retrieving data.");
}
});
//==========================================
//===============================================================================
//jqGrid --> Navigation Buttons...
//===============================================================================
//Column Chooser Icon [Columns]...
//#$('#' + _jqgridSpreadsheetId).navButtonAdd('#' + _jqgridPagerId, {
$('#' + _jqgridSpreadsheetId).jqGrid('navButtonAdd', '#' + _jqgridPagerId, {
position: "first",
caption: "Columns",
title: "Columns",
//cursor: "pointer", //This does not work...
onClickButton: function () {
//http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods&s[]=column&s[]=chooser...
//$('#' + _jqgridSpreadsheetId).columnChooser({
$(this).columnChooser({
title: "Columns",
caption: "Select Columns",
width: _jqgridDialogColumnChooserWidth,
modal: true,
done: function (perm) {
if (perm) { /* "OK" button are clicked... */
this.jqGrid("remapColumns", perm, true);
}
else { /* "Cancel" button or "x" button are clicked... */ }
}
});
}
});
//===============================================================================
You need to include the call of navGrid which creates navigator bar before you can add any custom button in the navigator bar with respect of navButtonAdd. Even if you don't need any standard buttons you should add the call of navGrid with the corresponding parameters: .jqGrid("navGrid", {add: false, edit: false, del: false, refresh: false, search: false});

Kendo UI Grid - update total column based on incell edit of another?

I currently have a grid with three columns: qty, price and totalPrice. What I have done is only made the qty column editable. What I want is that when the qty cell is changed for the totalPrice column to automatically be updated (doing qty * price). I have tried adding a template to the totalPrice column as follow :
template: "#= qty * price #"
but this is not working.
Can anyone help please??
grid = $("#grid").kendoGrid({
dataSource: dsDataSource,
height: 500,
editable: "incell",
groupable: false,
sortable: false,
selectable: true,
pageable: false,
scrollable: true,
navigatable: false,
change: function(e){
},
columns:
[
{field: "qty", editable: true, title: "Qty", width: "20px", headerAttributes: {style:"text-align:center;"}, attributes: {style:"text-align:right;" } },
{field: "price", editable: false, title: "Price", width: "20px", headerAttributes: {style:"text-align:center;"}, attributes: {style:"text-align:right;" } },
{field: "totalPrice", editable: false, title: "Total", width: "20px", headerAttributes: {style:"text-align:center;"}, attributes: {style:"text-align:right;" }, template: "#= qty * price#" }
]
}).data("kendoGrid");
You can achieve the same result without template
$("#grid").kendoGrid({
columns: [
{ field: "qty",editable: true, title: "Qty",width: "20px" },
{ field: "price",editable: false, title: "Price", width: "20px" },
{ field: "totalPrice", editable: false, title: "Total", width: "20px" }
],
dataSource: {
data:[
{ id: 1, qty: 1, price: 30, totalPrice:30},
{ id: 2, qty: 2, price: 33, totalPrice:66}
],
schema: {
model: { id: "id" }
}
},
editable: "incell",
edit: function(e) {
var price =e.container.find("input[name=price]").data("kendoNumericTextBox");
var totalPrice =e.container.find("input[name=totalPrice]").data("kendoNumericTextBox");
if(price != null || totalPrice != null)
this.closeCell();
},
save: function(e) {
if (e.values.qty != null)
e.model.totalPrice = e.values.qty * e.model.price;
e.sender.refresh();
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
You can add eventhandler
save: function(e) { e.sender.refresh(); }
which refreshes the grid.

sortable rows not working while jquery-ui.js is implemented

I am trying to implement sortable rows in jqgrid, I have searched a lot but still sortable rows is not working. Here is my js files I have included
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.6.custom.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jqgrid/js/jquery.layout.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jqgrid/js/i18n/grid.locale-en.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jqgrid/js/jquery.jqGrid.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jqgrid/jquery.jqGrid.src.js")"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
here is my code
function BindGridView(columnNames, colModel) {
myData = [
{ ID: "1", Name: "Aswin", Value: "2" },
{ ID: "3", Name: "bshley", Value: "2" },
{ ID: "2", Name: "sgnel", Value: "4" },
{ ID: "4", Name: "dnoop", Value: "6" }
];
var gridimgpath = '/Scripts/jqgrid/themes/redmond/images';
$("#dataList").jqGrid('GridUnload');
jQuery("#dataList").jqGrid({
datatype: "local",
data: myData,
loadonce: true,
colNames: ["ID", "Name", "Value"],
colModel: [
{ name: "ID", width: 80 },
{ name: "Name", width: 90 },
{ name: "Value", width: 80, align: "right" }
],
autowidth: true,
width: 'auto',
height: 'auto',
rowNum: 10,
rowList: [10, 20, 30],
scrolling: true,
shrinktofit: true,
pager: '#pager',
sortable: true,
sortname: 'Name',
rownumbers: false,
rownumWidth: 30,
viewrecords: true,
sortorder: "desc",
multiselect: false,
imgpath: gridimgpath,
}).navGrid("#pager",
{ refresh: false, add: false, edit: false, search: false, del: false },
{}, // settings for edit
{}, // settings for add
{}, // settings for delete
{} // Search options. Some options can be set on column level
);
}
jQuery("#dataList").jqGrid(
'sortableRows',
{
update: function (e, ui) {
console.log("sortable");
alert("item with id=" + ui.item[0].id + " is droped");
}
});
jQuery("#dataList").setGridParam({ data: myData }).trigger("reloadGrid");
Grid is loaded with data but drag drop functionality of sortable row is not working.

jqGrid dose not work when i run from IIS 7.2 (virtual directory)

Expert,
I have created one application and implemented JQGrid for Add, Edit and Delete, This is working fine with Running from Visual Studio 2010.
Now i created Virtual Directory for this application and then i am trying to access Index page it will not displaying anything because the JQGrid was not loaded it is giving me
following errr:
Error: jQuery("#list").jqGrid is not a function
Source File: http://localhost/CAFM/TabMaster
Line: 58
Here is the JQGrid code snippet.
jQuery(document).ready(function () {
alert(jQuery("#list"));
jQuery("#list").jqGrid({
url: '/TabMaster/JQGridGetGridData',
datatype: 'json',
mtype: 'GET',
colNames: ['col ID', 'First Name', 'Last Name'],
colModel: [
{ name: 'colID', index: 'colID', width: 100, align: 'left', searchoptions: { sopt: ['eq', 'ne', 'cn']} },
{ name: 'FirstName', index: 'FirstName', width: 150, align: 'left', editable: true },
{ name: 'LastName', index: 'LastName', width: 300, align: 'left', editable: true },
],
pager: jQuery('#pager'),
rowNum: 100,
rowList: [10, 50, 100, 500, 1000, 2000, 5000, 7000, 10000],
sortname: 'colID',
sortorder: "asc",
viewrecords: true,
multiselect: true,
imgpath: '/scripts/themes/steel/images',
caption: 'Tab Master Information'
}).navGrid('#pager', { edit: true, add: true, del: true },
// Edit options
{
savekey: [true, 13],
reloadAfterSubmit: true,
jqModal: false,
closeOnEscape: true,
closeAfterEdit: true,
url: "/TabMaster/JQGridEdit",
afterSubmit: function (response, postdata) {
if (response.responseText == "Success") {
jQuery("#success").show();
jQuery("#success").html("Record updated successfully! [" + postdata.FirstName + " " + postdata.LastName + "]");
jQuery("#success").fadeOut(6000);
return [true, response.responseText]
}
else {
return [false, response.responseText]
}
}
},
// Add options
{
url: '/TabMaster/JQGridCreate',
closeAfterAdd: true,
afterSubmit: function (response, postdata) {
if (response.responseText == "Success") {
jQuery("#success").show();
jQuery("#success").html("Record added successfully! [" + postdata.FirstName + " " + postdata.LastName + "]");
jQuery("#success").fadeOut(6000);
return [true, response.responseText]
}
else {
return [false, response.responseText]
}
}
},
// Delete options
{
url: '/TabMaster/JQGridRemove',
afterSubmit: function (response, rowid) {
if (rowid.length > 0) {
jQuery("#success").show();
jQuery("#success").html("Record deleted successfully! [" + rowid + "]");
jQuery("#success").fadeOut(6000);
return [true, response.responseText]
}
else {
return [false, response.responseText]
}
}
},
{
closeOnEscape: true,
multipleSearch: false,
closeAfterSearch: true
}
);
});
following are the JQuery files that i included in my projects.
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Content/themes/base/jquery.ui.theme.css")" rel="Stylesheet" type="text/css" />
<link href="#Url.Content("~/Scripts/themes/steel/grid.css")" rel="Stylesheet" type="text/css" />
<link href="#Url.Content("~/Scripts/themes/jqModal.css")" rel="Stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery.jqGrid.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/jqModal.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/jqDnR.js")" type="text/javascript"></script>
following is the hierarchy of Scripts
Thanks in advance!
Imdadhusen
It doesn't work because you have hardcoded your urls:
url: '/TabMaster/JQGridGetGridData'
You should always be using URL helpers when dealing with urls:
url: '#Url.Action("JQGridGetGridData", "TabMaster")'
When you deploy your application in a virtual directory the address i no longer /TabMaster/JQGridGetGridData but it is /YourApplicationName/TabMaster/JQGridGetGridData. That's the reason why you should always use url helpers.
The same stands true for your edit options url and your image paths. For static resources use #Url.Content and for controller actions use #Url.Action.

uncaught exception: jqGrid - No such method: navGrid

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.

Resources