jgGrid not showing data using asp.Net MVC 3.0 - asp.net-mvc-3

Question

I am having a problem showing json data returned from my view in jgGrid 4.0
in the head section I have
<script src="/Scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.lazyload.min.js" type="text/javascript"></script>
<script src="/Scripts/global.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
the body
$(document).ready(function () {
jQuery("#grid").jqGrid({
url: '#Url.Action("getusers", "dashboard",new {area="Security"})',
datatype: "json",
mtype: "GET",
colNames: ['Id', 'UserName'],
colModel: [
{ name: 'Id', index: 'Id',width: 200, align: 'left'},
{ name: 'UserName', index: 'UserName', width: 200, align: 'right' }
],
rowList: null,
pgbuttons: false,
pgtext: null,
viewrecords: false,
page:false,
caption: "Users"
});
});
here the Action code returning a json
public JsonResult GetUsers()
{
var repo = ObjectFactory.GetInstance<IRepository<User>>();
var result = (from x in repo.Query(x => x.ApplicationName == "DBM") select new {Id=x.Id, UserName=x.UserName}).ToArray();
return this.Json(result, JsonRequestBehavior.AllowGet);
}
}
I tested in both firefox and IE 9 the grid renders empty, no errors in firebug and data looks OK.
any hints would be appreciated.

Answer 1

jqGrid requires a specifc json format:
try this
var jsonData = new
{
total = (rowcount + paging.Size - 1) / paging.Size
page = paging.Page,
records = rowcount,
rows = (
from x in repo.Query(x => x.ApplicationName == "DBM")
select new
{
id=x.Id,
cell = new string[]
{
// the order of the columns here must match
x.Id,
x.UserName
}
})
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
See using jquery grid with asp.net mvc