jqGrid problem displaying the contents of the grid

I am using jqGrid. I am loading the data into the grid from the server side. The server responds back to the client with the following data.

{
    "page":"1",
    "total":"1",
    "totalrecords":"3",
     "rows":[
         {"name":"query-2","desc":"patton","id":2},
         {"name":"query-=576","desc":"kumar","id":3},
         {"name":"query-=57664","desc":"krishna","id":4}
     ]
}

My jsonReader and other data looks like this

  jsonReader : {
      cell : "",
      id : "0"
  },
  datatype : "json",
  mtype : "POST",
  url : "loadData.htm",
  colModel : [ {
          name : "name",
          index : "name",
          sorttype : "String",
          title : false,
          resizable : false,
          align : "left"
      },
      {
          name : "id",
          index : "id",
          hidden:"true"
      },
      {
          name : "desc",
          index : "desc",
          title : false,
          align : "left"
      },

As I have said I am getting the response back to the client. But the grid is unable to s开发者_如何学Chow the contents, but it is displaying empty data.

BTW, I am sending data as a string. Is it required to send the data as a JSON object?

You don't included definition of the grid (at least colModel). So I could not be sure about the usage of "id". Nevertheless I suppose that you should use the following jsonReader

jsonReader : {
   records: "totalrecords",
   cell: "",
   repeatitems: false
}

Moreover I recommend you to use some other extension as HTM for the url parameter (currently you have url: "loadData.htm"). It is important that jQuery.ajax used by jqGrid could try to guess the content type of the data or the web server could place explicitly in the HTTP header the "Content-Type" other as "application/json" which can follow to problems.

See demo here.