title: Razor: Auto-complete text box inside jqGrid, How to bind values?
body: <p>I'm developing a page where i need to show a jqGrid with inline editing mode. (Razor view, MVC3)
  The Grid will have no rows initially but an empty row to add items and hitting "enter" upon the last field should save the row data, and then empty 2nd row should get created.</p>
  
  <p>There are 4 columns in the Grid and the first column should be auto-complete.
  I have already written multiselect jqGrid which works fine.  But now the approach changed to auto-complete.</p>
  
  <p>I have already written controller method that talks to DB and gets me the values till controller.  Those values are the ones to be available for auto-complete.</p>
  
  <p>Can someone throw some light on,</p>
  
  <ol>
  <li><p>Writing jqGrid with auto-complete text box inside, which binds controller returned values(I could achieve it by keeping text box outside grid)</p></li>
  <li><p>Saving first row upon hitting enter and creating an empty second row</p></li>
  </ol>
  
  <p>Edited:
  Here is my updated code:</p>
  
  <pre><code>   myGrid.jqGrid({
                  url: '@Url.Action("Skills")',
                  onSelectRow: function(currentSelectedRow)  {
                      alert("Always triggered inside");
                      if(currentSelectedRow &amp;&amp; currentSelectedRow != $.lastSelectedRow){
                          alert("Before Block 1");
                          $('#jqgSkills').jqGrid('saveRow', $.lastSelectedRow, false); 
                          alert("After Block 1");
                          $.lastSelectedRow = currentSelectedRow; 
                     }
                      alert("before block 2");
                      $('#jqgSkills').jqGrid('editRow', $.lastSelectedRow, true); 
                      alert("after block 2");
                  },
  
                  datatype: 'json',
                  mtype: 'POST',
                  colNames: ['ID', 'SkillName', 'SkillType', 'RequiredDesired', 'RelevantExp'],
                  colModel: [
  
                      {
                      name:'ID', index: 'ID', editable: true, width: 10
                      },
                      { name: 'SkillName', index: 'SkillName', editable: true, width: 150,
                          editoptions: {
                              sopt: ['cn', 'nc', 'bw', 'bn', 'eq', 'ne', 'ew', 'en', 'lt', 'le', 'gt', 'ge'],
                              dataInit: function (elem) {
                                  $(elem).autocomplete({ source: '@Url.Action("GetSkillNameAutocomplete")' });
                              }
                          }
                      },
                      { name: 'SkillType', editable: true, index: 'SkillType', width: 40, edittype: 'select', editoptions: { dataUrl: '@Url.Action("SkillTypes")' }
                      },
                      { name: 'RequiredDesired', editable: true, index: 'RequiredDesired', width: 40, edittype:"select", editoptions:{value:":;R:Required;D:Desired"}
                      },
                      { name: 'RelevantExp', editable: true, index: 'RelevantExp', width: 40, key: true
                      },
                  ],
                 // pager: '#jqgpSkills',
                  autowidth: true,
                  rowNum: 10,
                  rowList: [5, 10, 20, 50],
                  sortname: 'SkillName',
                  sortorder: 'asc',
                  rownumbers: true,
                  viewrecords: true,
                  altRows: true,
                  altclass: 'myAltRowClass',
                  height: '100%',
                  gridview: true,
                  jsonReader: { cell: "" },
                  caption: 'RRF - Skill Association',
              });
  </code></pre>
  
  <p>Here is "Click to add a row" button</p>
  
  <pre><code>$("#addrow").click( function(currentSelectedRow) {
  
              var emptyRow = [{ID:"",SkillName:"",RequiredDesired:"",RelevantExp:"" }];
              alert("Before new row addition");
              jQuery("#jqgSkills").addRowData(emptyRow.id, emptyRow);
              alert("new row added");
  });
  </code></pre>