JQuery JQGrid: How to load JSON data from Spring MVC 3 @RequestBody

I really HATE to ask this because I thought this is supposed to be as simple as counting 1-2-3. I've researched since yesterday and today but I've found no solution.

Here's what I want to do. Retrieve JSON data from my Spring MVC 3 Controllers and display that data on my JQGrid.

To setup my Controller to send the JSON data, I followed the advice from this article Ajax Simplifications in Spring 3.0

This the request mapping that processes the JSON request:

@RequestMapping(value = "/users"开发者_运维问答, method = RequestMethod.GET)
public @ResponseBody  List<UserDTO>viewUsersAsJSON(HttpServletRequest request, HttpServletResponse response, ModelMap model) {

    logger.debug("Retrieving all users as JSON");

    return userRoleService.getAll();
}

This mapping works because I'm able to retrieve the JSON data from Firefox and RESTClient. Here's the sample JSON data output (I had to remove the sensitive data):

[{"username":"johnsmith","userId":1,"firstName":"John","lastName":"Smith","id":"1"},{"username":"stackoverflow","userId":2,"firstName":"Stack","lastName":"Overflow","id":"2"}]

I didn't have to specify any Accept=application/json headers in Firefox or RESTClient to get this data. I just type the full URL ie: http://localhost/myapp/users

I didn't do any special configuration or XML config on my Spring MVC 3 mapping because I expect (base on the article and the results I got) that it just works and gives me JSON.

Here's my JqGrid as declared on my JSP page:

Javascript:

 <script type="text/javascript">
 jq(function() {
  jq("#list2").jqGrid({
      url:'/myapp/users',
   datatype: 'json',
   mtype: 'GET',
      colNames:['Id','Username', 'User Id', 'First Name', 'Last Name'],
      colModel:[
       {name:'id',index:'id', width:55},
       {name:'username',index:'username', width:90},
       {name:'userId',index:'userId', width:90},
       {name:'firstName',index:'firstName', width:100},
       {name:'lastName',index:'lastName', width:80, align:"right"}
      ],
      rowNum:10,
      rowList:[10,20,30],
      pager: '#pager2',
      sortname: 'id',
      viewrecords: true,
      sortorder: "desc",
      caption:"Users Table"
  });
  jq("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});

 });


</script>

Here's my CSS elements as declared in the JSP:

<table id="list2"></table>
<div id="pager2"></div>

I ran Firefox Error Console. No errors found. I ran Firebug. I didn't see any errors as well.

The JqGrid loads with the correct column names but it's empty! I setup another JqGrid on a different JSP page using a simple array data and it's able to load the data. Any ideas or solutions?

It's really difficult to find any working examples of Spring MVC 3 JSON JqGrid integration.

To have jqGrid accept that JSON you need to either define a jsonreader (details here) or set up the output such that it conforms to the defaults that jqgrid expects. If you didn't structure it exactly as expected jqGrid will silently fail.

To make this work with the default jsonreader you'll want to restructure your JSON so the object looks like this:

{"page":1,"total":1,"records":1,"rows":[{"id":1,"cell":["johnsmith",1,"John","Smith",1]}]}