title: JQuery JQGrid: How to load JSON data from Spring MVC 3 @RequestBody
body: <p>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.</p>
  
  <p>Here's what I want to do. Retrieve JSON data from my Spring MVC 3 Controllers and display that data on my JQGrid.</p>
  
  <p>To setup my Controller to send the JSON data, I followed the advice from this article <a href="http://blog.springsource.com/2010/01/25/ajax-simplifications-in-spring-3-0/" rel="nofollow">Ajax Simplifications in Spring 3.0</a> </p>
  
  <p>This the request mapping that processes the JSON request:</p>
  
  <pre><code>@RequestMapping(value = "/users", method = RequestMethod.GET)
  public @ResponseBody  List&lt;UserDTO&gt;viewUsersAsJSON(HttpServletRequest request, HttpServletResponse response, ModelMap model) {
  
      logger.debug("Retrieving all users as JSON");
  
      return userRoleService.getAll();
  }
  </code></pre>
  
  <p>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):</p>
  
  <pre><code>[{"username":"johnsmith","userId":1,"firstName":"John","lastName":"Smith","id":"1"},{"username":"stackoverflow","userId":2,"firstName":"Stack","lastName":"Overflow","id":"2"}]
  </code></pre>
  
  <p>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: <a href="http://localhost/myapp/users" rel="nofollow">http://localhost/myapp/users</a></p>
  
  <p>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.</p>
  
  <p>Here's my JqGrid as declared on my JSP page:</p>
  
  <p>Javascript:</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
   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});
  
   });
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Here's my CSS elements as declared in the JSP:</p>
  
  <pre><code>&lt;table id="list2"&gt;&lt;/table&gt;
  &lt;div id="pager2"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I ran Firefox Error Console. No errors found. I ran Firebug. I didn't see any errors as well.</p>
  
  <p>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?</p>
  
  <p>It's really difficult to find any working examples of Spring MVC 3 JSON JqGrid integration.</p>