jqGrid not data display in the grid
In an ASP.NET MVC 3.0 application, I use jqGrid. I use the code below. I see the grid but no data in. I passed in the "GridData" action, the list content is one element but nothing in the gri开发者_Python百科d.
C# :
public ActionResult GridData()
{
List<Customer> list = new List<Customer>();
list.Add(new Customer() { Code = "AAA", FirstName = "BBB", LastName = "CCC" });
return Json(list);
}
HTML :
<table id="jqgProducts" cellpadding="0" cellspacing="0"></table>
<div id="jqgpProducts" style="text-align:center;"></div>
<script type="text/javascript">
$(document).ready(function () {
$('#jqgProducts').jqGrid({
//url from wich data should be requested
url: '/Customer/GridData/',
//type of data
datatype: 'json',
//url access method type
mtype: 'GET',
//columns names
colNames: ['Id', 'LastName','FirstName', 'Code'],
//columns model
colModel: [
{ name: 'Id', index: 'Id', align: 'left' },
{ name: 'LastName', index: 'LastName', align: 'left' },
{ name: 'FirstName', index: 'FirstName', align: 'left' },
{ name: 'Code', index: 'Code', align: 'left' }
],
//pager for grid
pager: $('#jqgpProducts'),
//number of rows per page
rowNum: 10,
//initial sorting column
sortname: 'Id',
//initial sorting direction
sortorder: 'asc',
//we want to display total records count
viewrecords: true
});
});
</script>
First of all you should return JSON data from the MVC action using JsonRequestBehavior.AllowGet
as the second parameter of jqGrid.
You next and the main problem is the data format. There are default data format which wait jqGrid. The format is described in the documentation. So you can either produce the JSON data in the standard format like suggested you Saad or add jsonReader
parameter to the jqGrid which will describe how your current JSON data can be read. So with almost the same GridData
:
public ActionResult GridData() {
var list = new List<Customer> {
new Customer {Id = "myid1", Code = "AAA", FirstName = "BBB", LastName = "CCC"}
};
return Json (list, JsonRequestBehavior.AllowGet);
}
you can add the following jsonReader
parameter
jsonReader: {
id: "Id",
repeatitems: false,
root: function (obj) { return obj; },
page: function () { return 1; },
total: function () { return 1; },
records: function (obj) { return obj.length; }
}
to read the data. Ho you can see in the code above I added Id
property to the Customer
class. The property can be a string of integer. Both will be OK for jqGrid. The Id
value will be saved twice: one time as the id
of the <tr>
element of the row of the grid and once as the <td>
element of the first table column. If you never need to display the id for the user you can remove the Id
column from the grid, but still place id
in the JSON data. It you will use non-unique ids you could have the same problems like described here.
Another way will be to change the code of the MVC Action so that it produces the JSON data in the default format. To do this you can change the code of the GridData
to the following:
public ActionResult GridData() {
var list = new List<Customer> {
new Customer {Id = "myid1", Code = "AAA", FirstName = "BBB", LastName = "CCC"}
};
return Json (new {
page = 1,
total = 1,
records = list.Count,
rows = (from x in list
orderby x.Id
select new {
id = x.Id,
cell = new[] {
x.Code,
x.FirstName,
x.LastName
}
}
)
}, JsonRequestBehavior.AllowGet);
}
All the code above I included only for understanding of the jqGrid basics. In the code above the data will be sorted by Id
which corresponds to the sortname: 'Id'
which you use in the jqGrid. The name will be send to the server as the sidx
parameter. Additionally the parameters sortorder: 'asc'
and rowNum: 10
of the jqGrid will define the values of sord
and rows
parameters of the action. The last parameter page
send to the server will be initially set to 1 and will be increased if the user choose the next page. So typical prototype of the MVC action is
public ActionResult GridData (string sidx, string sord, int page, int rows)
I recommend you to read the old answer and the UPDATED part of the next answer. I hope the answers bring you forward in the usage of jqGrid. Here you will find the answer on the question: why the default format of the JSON data, which jqGrid wait for, looks so strange.
We're also using jqGrid in our project. Check these two links: controller(LoadApplicationGrid) and view. And here our JQGridView custom Json result.
Also, you can allow GET method for the Json result using JsonRequestBehavior.AllowGet, then call the action directly from the browser and compare the serialized data with jqGrid requirements.
I think your controller throws an exception in GridData()
, because MVC3 doesn't allow JSON answers to GET requests by default.
You may modify this behavior like this:
public ActionResult GridData()
{
List<Customer> list = new List<Customer>();
list.Add(new Customer() { Code = "AAA", FirstName = "BBB", LastName = "CCC" });
return Json(list, JsonRequestBehavior.AllowGet);
}
try this code segment. i always create a JqgridRow to return in Json.
public ActionResult GridData()
{
List<Customer> list = new List<Customer>();
list.Add(new Customer() { Code = "AAA", FirstName = "BBB", LastName = "CCC" });
var GetData = new
{
rows = (from x in list
select new JqGridRow()
{
cell = new string[] {
x.Code.ToString(),
x.FirstName.ToString(),
x.LastName .ToString(),
}
}
).ToArray()
};
return Json(GetData , JsonRequestBehavior.AllowGet);
}
hope this help..
精彩评论