title: Asp.Net MVC jqgrid is not displaying my data
body: <p>I am trying to fill a jqgrid. The grid is rendered but no data is displayed. I know my controller -- as called through a standard ajax function -- is working. It returns the data I'd expect. </p>
  
  <p>How do I verify that jqgrid is returning the same data and what am I doing incorrectly that is not allowing the data to be dispayed?</p>
  
  <p>jqgrid:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
     jQuery(document).ready(function() {
          $.ajaxSetup({ cache: false });
          var rvtoken = $("input[name='__RequestVerificationToken']").val();
          var ModuleId = @Dnn.ModuleContext.ModuleId;
          var TabId = @Dnn.ModuleContext.TabId;
          $('#grid').jqGrid({
              url: '/DesktopModules/MVC/CW.GridTest/Item/getArtists2',
              datatype: 'json',
              mtype: 'POST',
              contentType: 'application/json',
              loadBeforeSend: function(jqXHR) {
                  jqXHR.setRequestHeader('ModuleId', ModuleId);
                  jqXHR.setRequestHeader( 'TabId', TabId);
                  jqXHR.setRequestHeader('RequestVerificationToken', rvtoken);
              },
              colNames: ['ArtistID', 'ArtistName', 'City'],
              colModel: [
                  { name: 'ArtistID', index: 'ArtistID', width: 80, align: 'left', editable: false },
                  { name: 'Name', index: 'ArtistName', width: 120, align: 'left', editable: true },
                  { name: 'Location', index: 'City',width: 60,align: 'left',editable: true}
              ],
              loadError: function (jqXHR, textStatus, errorThrown) {
                  alert('HTTP status code: ' + jqXHR.status + '\n' +
                      'textStatus: ' + textStatus + '\n' +
                      'errorThrown: ' + errorThrown);
                  alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
              },
              loadOnce: true,
              autoencode: true,
              height: '100%',  
              rowNum: 10,    
              emptyrecords: 'No records',  
              sortname: 'ArtistID',
              sortorder: 'desc',
              viewrecords: true,
              caption: 'Artists',
              width: 300,
              gridview: true,
              jsonReader:
                  {
                      total: 'total',
                      page: 'page',
                      records: 'records',
                      root: 'rows',
                      repeatitems: false,
                      id: 'ArtistID'
                  } 
          });
         jQuery("#grid").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false });
      });
  &lt;/script&gt;
  
  
  &lt;div&gt;
      &lt;table id="grid"&gt;&lt;/table&gt;
      &lt;div id="pager"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Returned data from standard ajax:</p>
  
  <pre><code>    {  
         "total":100,
         "page":99,
         "records":6,
         "rows":"[
  {\"ArtistID\":1,\"ArtistName\":\"Clayton Knight\",\"City\":\"Tigard\"},
  {\"ArtistID\":2,\"ArtistName\":\"Corral Creek Bluegrass\",\"City\":\"Sherwood\"},
  {\"ArtistID\":3,\"ArtistName\":\"Never Strangers Band\",\"City\":\"Portland\"},
  {\"ArtistID\":5,\"ArtistName\":\"The Hillwilliams\",\"City\":\"Tigard\"},
  {\"ArtistID\":7,\"ArtistName\":\"Bobo and the Bobbettes\",\"City\":\"Ellensburg\"},
  {\"ArtistID\":27,\"ArtistName\":\"Bobo 5\",\"City\":\"Ellensburg\"}
  ]"
  }
  </code></pre>