jQuery Grid Plugin - jqGrid

I have following JSON object format.

{"success":true,"message":[null],"page":0,"total":0,"records":0,"rows":[ {"userid":8,"username":"XYZ","userdetails":{"detailid":84,"city":"SDFE","state":"OPUY"}}, {"userid":9,"username":"ABCD","userdetails":{"detailid":85,"city":"QWSDF","state":"PLKJH"}} }

I want to display Username,City,State from the JSON data. It only shows the usename field, other fields are not able to display as userdetails is nested JSON object.

My JQgrid Model is as follows.

  jq("#grid").jqGrid({
      url:'${pageContext.servletContext.contextPath}/grid/load.action',
   datatype: 'json',
   mtype: 'GET',
      colNames:['Id', 'User Name', 'City','State'],
      colModel:[
       {name:'userid',index:'userid', width:55,editable:true,editoptions:{readonly:false,size:10},hidden:true},
       {name:'username',index:'username', width:100,editable:true,edittype:'text',
           editoptions: {
                dataInit: function (elem) {
                    myAutocomplete(elem, "${pageContext.servletContext.contextPath}/grid/autocomplete.action");

                }

       }},
       {name:'city',index:'city', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}},
           {name:'state',index:'state', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}}
      ],
      postData: {
   },
   rowNum:20,
      rowList:[20,40,60],
      height: 200,
      autowidth: true,
   rownumbers: true,
      pager: '#pager',
      sortname: 'id',
      viewrecords: true,
      sortorder: "asc",
      caption:"Users",
      emptyrecords: "Empty records",
      loadonce: false,
      editurl:'${pageContext.servletContext.contextPath}/grid/edit.action',
      loadError : function(xhr,st,err) { 
          console.log('display error : '+err);  
          jq("#rsperror").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText);

      },
      loadComplete: function() {
   },
      jsonReader : {
          root: "rows",
          page: "page",
          total: "total",
          records: "records",
          repeatitems: false,
          cell: "cell",
          id: "id"
      }
  });
  jq("#grid").jqGrid('navGrid','#pager',
    {edit:true,add:true,del:false,search:false},
    { },
          { },
          { },
    {
        sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
           closeOnEscape: true,
            multipleSearch: true,
             closeAfterSearch: true }
  );

 });

Please suggest me the solution for how to load json data when it has nested object in it.