title: Sorting jqGrid in ASP.NET MVC client view with jQuery and LINQ-to-Entities
body: <p>I'm a jQuery noob, so I'm sure I'm missing something simple here.</p>
  
  <p>I've got the jqGrid working with an action that creates JSON data from a LINQ-to-Entities operation. But when I click on the column headers in the browser, the rows don't sort. The ascending/descending indicator shows up, but nothing else happens.</p>
  
  <p>The necessary JavaScript and CSS links are in the master page header:</p>
  
  <pre>
  &lt;script src="/Scripts/jquery-1.3.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;!-- CSS and JavaScript files for jqGrid to display on Details pages --&gt;
  &lt;link rel="stylesheet" type="text/css" href="/scripts/jQuery/jqGrid-3.4.4/themes/green/grid.css" title="green" media="screen" /&gt;
  &lt;script src="/Scripts/jQuery/jqGrid-3.4.4/jquery.jqGrid.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/jQuery/jqGrid-3.4.4/js/jqModal.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/jQuery/jqGrid-3.4.4/js/jqDnR.js" type="text/javascript"&gt;&lt;/script&gt;
  </pre>
  
  <p>Here's my initialization code:</p>
  
  <pre>
  // jqGrid setup.
  $("#gridlist").jqGrid({
      url: '/Contact/GridData',
      datatype: 'json',
      mtype: 'GET',
      colNames: ['ID', 'First Name', 'Last Name', 'Organization'],
      colModel: [
          { name: 'id', index: 'id', width: 40, align: 'left', resizable: true },
          { name: 'first_name', index: 'first_name', width: 200, align: 'left', resizable: true, sortable: true, sorttype: "text" },
          { name: 'last_name', index: 'last_name', width: 200, align: 'left', resizable: true, sortable: true, sorttype: "text" },
          { name: 'organization', index: 'organization', width: 300, align: 'left', resizable: true, sortable: true, sorttype: "text"}],
      pager: jQuery('#pager'),
      rowNum: 5,
      rowList: [5, 10, 20, 50],
      repeatitems: false,
      viewrecords: true,
      imgpath: '/scripts/jQuery/jqGrid-3.4.4/themes/green/images',
      caption: 'Contacts'
  });                  
  </pre>
  
  <p>And here's the HTML:</p>
  
  <pre>
      &lt;h3&gt;My Grid Data&lt;/h3>
      &lt;table id="gridlist" class="scroll" cellpadding="0" cellspacing="0"&gt;
      &lt;/table&gt;
      &lt;div id="pager" class="scroll" style="text-align:center;"&gt;
      &lt;/div&gt;
  </pre>
  
  <p>And, just for completeness, the action method:</p>
  
  <pre>
  public ActionResult GridData()
  {
      var page = new { page = 1 };
  
      IEnumerable contacts = _db.ContactSet;
      int i = 0;
      var rows = new object[contacts.Count()];
  
      foreach (Contact contact in contacts)
      {
          rows[i] = new { id = contact.ID, cell = new[] { contact.ID.ToString(), contact.First_Name, contact.Last_Name, contact.Organization } };
          i++;
      }
  
      var result = new JsonResult();
      result.Data = new { page = 1, records = 2, rows, total = 1 };
  
      return result;
  }
  </pre>
  
  <p>Any ideas what obvious setting I'm missing here?</p>