jgGrid not showing data using asp.Net MVC 3.0

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.

Jason Watts · Accepted Answer · 2011-05-13T21:17:18.673

2

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

edited May 13 '11 at 21:17

answered May 13 '11 at 17:27

Jason Watts

3,800
29
33

@Jason & @Sammy: There are two small errors in the code: 1) instead of `total = (rowcount / paging.Size) + 1` one should use `total = (rowcount + paging.Size - 1) / paging.Size` 2) The properties of `rows` should be `id` (not `Id`) and `cell`. So you should replace (in one place only) `Id=x.Id` to `id=x.Id`. Moreover one can eliminate the posting of `Id` twice. See the "UPDATED" part of [the answer](http://stackoverflow.com/questions/5500805/asp-net-mvc-2-0-implementation-of-searching-in-jqgrid/5501644#5501644) for the code example. – Oleg May 13 '11 at 18:28
@Oleg, This worked for me. 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.ToString(), x.UserName } }); I am sure what kind of parameter paging is in Jason's solution. – May 13 '11 at 19:32
@Oleg. True on using lowercase for the id field. Thats what happens when I cut and paste over my cut and paste code. I think my paging calculation is correct, but I will double check. thanks. – Jason Watts May 13 '11 at 20:43
@Jason Watts: if `rowcount=0` the `total` must be `0` (and not 1 as in your case). if `paging.Size=1` and `rowcount=1` the `total` must be `1` (and not 2 as in your case). So `total = (rowcount / paging.Size) + 1` is wrong. Now try `total = (rowcount + paging.Size - 1) / paging.Size` with different values of `rowcount` and `paging.Size` and you will see that it works always correct. – Oleg May 13 '11 at 21:04
@Oleg. I see. I return a simplified json object back when there are no rows, so I was not encountering that problem. I'll edit the math in the answer for future reference though. thanks! – Jason Watts May 13 '11 at 21:11

jgGrid not showing data using asp.Net MVC 3.0

1 Answers1