title: JqGrid use of index property of colModel instead of name Property during both Sorting and Searching
body: <p><strong>Question</strong>:</p>
  
  <p>using jqgrid to show data of a table. table has foreign key and we want to show text of its foreign key instead of Id. I also want that user can sort and filter over the foreign keys.</p>
  
  <p><strong>Example</strong>:</p>
  
  <ul>
  <li>Person Table: Id,Name,EducationId(foreign key for Education Table) </li>
  <li>Education able: Id,Name</li>
  </ul>
  
  <p>We want to show each person with the name of his/her education name in a jqgrid.</p>
  
  <ol>
  <li>If user click over education column, it sort according to <code>Education Name</code>(Not <code>Education Id</code>)</li>
  <li>If User want to filter over education, we show a dropdown(selector) that contain education Names,after user select one, the filter contain <code>EducationId</code> as <code>sField</code> and <code>Id</code> of selected value as <code>sValue</code> </li>
  </ol>
  
  <p><strong>My Solution</strong>:</p>
  
  <pre><code>var items1 = {@Html.GetEduType()};
  
  $(function () {
          $("#list").jqGrid({
              url: '/Home/GridData/',
              datatype: 'json',
              mtype: 'GET',
              colNames: ['Name','Education'],
              colModel: [
            { name: 'Name', index: 'Name' },
            { name: 'EducationId', index: 'Education.Name', search: true, 
               stype: 'select', searchoptions: { value: items1, sopt: ['eq', 'ne'] },
               formatter: 'select' , editoptions: { value: items1 }}],            
              viewrecords: true});
  $("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true });
  </code></pre>
  
  <ol>
  <li>With this code, <code>Home/GetData</code> just send <code>Person.Id</code>, <code>Person.Name</code>, <code>Person.EducationId</code> as json data and it is really good to not send more data than client needs. Also it send relation between <code>Education Id</code> and <code>Name</code> once and these data used for showing name instead of id in grid, and also to create dropdown value and text.</li>
  <li>I ignore to write other properties like pager, pagesize, etc</li>
  <li><code>@Html.GetEduType()</code> is razor server side function. It just returns pairs like 
  <code>[Education Id]:[Education Name]</code>. For example: (<code>1:'Diploma',2:'M.S.',...</code>) (I just use it to get education data once and did not use <code>UrlData</code>)
  (Yes, I use it in ASP.Net MVC 3, but its not an important point)</li>
  </ol>
  
  <p><strong>My Problem</strong>:
  It work great for showing data and sorting Education according to its name. But when I want to filter Education it send index value(<code>Education.Name</code>)  instead of name value (<code>EducationId</code>) in Http Post <code>sField</code> to server. This problem will be solved just by sending name value instead of index value.</p>
  
  <p>Thanks.</p>