Mark Highfield Mark Highfield - 2 months ago 18
Vb.net Question

Mapping data to JQGrid with Ajax call

I'm just trying to display a very simple JQGrid with data from an ajax call to a controller. All I'm seeing is the grid headers, no data. Can someone please help me figure out what I'm doing wrong? Thanks in advance!

Here's the Ajax call and JQGrid setup..

$("#grid").jqGrid({
url: '@Url.Action("GetLoanReport", "Report")',
datatype: "json",
height: "auto",
colNames: ['Name', 'Random Stuff'],
colModel: [
{ name: 'Name', index: 'Name', width: 150, sortable: true },
{ name: 'RandomStuff', index: 'RandomStuff', width: 500, sortable: false }
],
jsonReader: {
repeatitems: true,
root: 'rowdata',
page: 'currpage',
total: 'totalpages',
records: 'totalrecords'
},
rowNum: 10,
rowList: [5, 10, 30],
rownumbers: false,
gridview: true,
loadonce: true,
pager: "#page",
caption: "Flat Data Example"
});


Here's the controller code...

Function GetLoanReport() As JsonResult
ViewData("Ribbon") = "partials/_statsRibbon"

Dim response As New Response
Dim model As New ReportModel

model.Name = "Mark"
model.RandomStuff = "Highfield"

response.currpage = 1
response.totalpages = 1
response.totalrecords = 1
response.rowdata = model


Return Json(response, JsonRequestBehavior.AllowGet)
End Function

Answer

The main problem: rowdata should be array of items (array of objects) instead of one object only with Name and RandomStuff properties.

Additionally you should decide whether you implement server side paging of data or you want to return all the data from GetLoanReport at once and jqGrid should make local paging, sorting and filtering/sorting the data? In the case you should use loadonce: true option. Additionally it's important to choose the fork of jqGrid, which you use: free jqGrid, commercial Guriddo jqGrid JS or an old jqGrid in version <=4.7. I develop free jqGrid fork, which I can recommend you. If you use it, then I would recommend you to add forceClientSorting: true option additionally to loadonce: true. It will allows you to use sortname and sortorder options to sort the data returned from the server before it will be displayed.

Comments