Forum
Log In
Home
Topic RSS
00:17
16/03/2010
Offline
I am trying to use jqGrid to display data. How ever the data is just not displaying, and I get no errors at all.
The graphics of the grid are showing and it acts like it completes normally, but with no data in the grid. I have verified that my controller method is in fact returning the expected data in Json format.
Here is my script
<h2>Complete Unpaid</h2>
<table id="completeUnPaidList"></table>
<div id="pager"></div>
</div>
<script type="text/javascript">
var gridimgpath = '../../../../Content/CSS/startTheme/Images';
var gridDataUrl = 'DealerServices/JsonCompletedNotPayed';
jQuery("#completeUnPaidList").jqGrid({
url: gridDataUrl,
datatype: "json",
mtype: 'GET',
colNames: ['Invoice', 'Company', 'Model'],
colModel: [
{ name: 'invoice', index: "invoice", width: 50, align: 'left' },
{ name: 'company', index: "company", width: 100, align: 'left' },
{ name: 'descript', index: "descript", width: 100, align: 'left'}],
rowNum: 20,
rowList: [10, 20, 30],
imgpath: gridimgpath,
height: 'auto',
width: '400',
pager: jQuery('#pager'),
sortname: 'invoice',
viewrecords: true,
sortorder: "Desc",
caption: ""
});
$(function() {
// Set the grid json url to get the data to display
setGridUrl();
});
function setGridUrl() {
// Get the start and end dates entered
var newGridDataUrl = gridDataUrl;
// Set the parameters in the grid data source
jQuery('#completeUnPaidList').jqGrid('setGridParam', { url: newGridDataUrl }).trigger("reloadGrid");
}
</script>
here is my controller method
public ActionResult JsonCompletedNotPayed(string sidx, string sord, int page, int rows)
{
SpaService SpaSvc = new SpaService(spaRepository);
List<SpaOrder> context = SpaSvc.GetSpaOrdersCompleteNotPaid();
int pageIndex = Convert.ToInt32(page) - 1;
int pagesize = rows;
int totalrecords = context.Count();
int totalPages = (int)Math.Ceiling((float)totalrecords / (float)pagesize);
//string orderBy = string.Format("{0} {1}", sidx, sord);
var spas = context.AsQueryable()
//.OrderBy(orderBy)
.Skip(pageIndex * pagesize)
.Take(pagesize);
//format data for the grid
var jsondata = new
{
total = totalPages,
page = page,
records = totalrecords,
rows = (from s in spas
select new
{
cell = new string[]{
s.invoice.ToString(),
s.company,
s.descript
}
}).ToArray()
};
return Json(jsondata);
}
06:46
24/02/2010
Offline
Hi,
Have you tried to put a break point on your controller and see if the grid is actually calling JsonCompletedNotPayed?
I think you should initialized JqGrid inside JQuery ready function:
$(function() {
//Initialized JqGrid here
});
E.g. Check the javascript on this page (scroll all the way to the bottom to click on pop up to see the JqGrid)
16:23
16/03/2010
Offline
Have you tried to put a break point on your controller and see if the grid is actually calling JsonCompletedNotPayed?
Yes, I have done this. And it does go into the controller run the code and return a Json result set. But still no data shows.
20:15
24/02/2010
Offline
Hmmm…
I have tried your code with static data in MVC control as following…
{
total = 1,
page = page,
records = 5,
rows = new[]
{
new {id = 1, cell = new string[] {"abc1", "1", "a"}},
new {id = 2, cell = new string[] {"abc2", "1", "a"}},
new {id = 3, cell = new string[] {"abc3", "1", "a"}},
new {id = 4, cell = new string[] {"abc4", "1", "a"}},
new {id = 5, cell = new string[] {"abc5", "1", "a"}},
}
};
return Json(dataJson);
and it is working just fine.Give it a try and see if you get the grid to show up.
23:58
16/03/2010
Offline
ok still nothing. I am doing something seriously wrong, because i cannot even get any tutorials to work when I walk through them step by step
here is everything I have please help if you can. I have been battling this all day for three days now. Very frustrating.
i simplified it even more than on my original post.
here is my view
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT.....t;>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>ShowData</title>
<link href="../../Content/CSS/startTheme/jquery-ui-1.8rc3.custom.css" rel="stylesheet"
type="text/css" />
<link href="../../Content/CSS/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.4.1.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>
</head>
<body>
<div>
<h2>Complete Unpaid</h2>
<table id="completeUnPaidList"></table>
<div id="pager"></div>
</div>
<script type="text/javascript">
var gridimgpath = '../../Content/CSS/startTheme/Images/';
var gridDataUrl = 'Home/JsonCompletedNotPayed/';
jQuery("#completeUnPaidList").jqGrid({
url: gridDataUrl,
datatype: "json",
mtype: 'GET',
colNames: ['Invoice', 'Company', 'Model'],
colModel: [
{ name: 'invoice', index: "invoice", width: 50, align: 'left' },
{ name: 'company', index: "company", width: 100, align: 'left' },
{ name: 'descript', index: "descript", width: 100, align: 'left'}],
rowNum: 20,
rowList: [10, 20, 30],
imgpath: gridimgpath,
height: 'auto',
width: '400',
pager: jQuery('#pager'),
sortname: 'invoice',
viewrecords: true,
sortorder: "Desc",
caption: ""
});
$(function() {
// Set the grid json url to get the data to display
setGridUrl();
});
function setGridUrl() {
// Get the start and end dates entered
var newGridDataUrl = gridDataUrl;
// Set the parameters in the grid data source
jQuery('#completeUnPaidList').jqGrid('setGridParam', { url: newGridDataUrl }).trigger("reloadGrid");
}
</script>
</div>
</body>
</html>
here is my controller
public ActionResult JsonCompletedNotPayed(DateTime start, DateTime end, string sidx, string sord, int page, int rows)
{
var dataJson = new
{
total = 1,
page = page,
records = 5,
rows = new[]
{
new {id = 1, cell = new string[] {"abc1", "1", "a"}},
new {id = 2, cell = new string[] {"abc2", "1", "a"}},
new {id = 3, cell = new string[] {"abc3", "1", "a"}},
new {id = 4, cell = new string[] {"abc4", "1", "a"}},
new {id = 5, cell = new string[] {"abc5", "1", "a"}},
}
};
return Json(dataJson);
}
now when i run it and put a break point in the controller, it never gets there, and I just get a page with the top and bottom of the grid
09:53
24/02/2010
Offline
Here is the client code I used
url: '<%= Url.Content("~/Home/Test4Data/") %>',
datatype: "json",
mtype: 'GET',
colNames: ['Invoice', 'Company', 'Model'],
colModel: [
{ name: 'invoice', index: "invoice", width: 50, align: 'left' },
{ name: 'company', index: "company", width: 100, align: 'left' },
{ name: 'descript', index: "descript", width: 100, align: 'left'}],
rowNum: 20,
rowList: [10, 20, 30],
imgpath: '<%= Url.Content("~/Scripts/jqueryUI/css/ui-lightness/images") %>',
height: 'auto',
width: '400',
pager: jQuery('#pager'),
sortname: 'invoice',
viewrecords: true,
sortorder: "Desc",
caption: ""
});
Beside my div name "list2", imagpath, and url, there are really no difference. I am also puzzled why yours do not work.
I recommend you to using MVC "Url.Content" to resolve the url, just a better practice.
18:17
16/03/2010
Offline
Thank you for the advice on using url.Content I will do that for sure.
I actually figured out what the problem was. I am using MVC2, with that I needed to add the following to my controller return statement
JsonRequestBehavior.AllowGet
so the return now looks like:
return Json(jsondata,JsonRequestBehavior.AllowGet);
and it works perfectly!
I appreciate your help, you really helped me understand what was working and that I needed to look else where in the code to find the problem.
Most Users Ever Online: 715
Currently Online:
50 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
