text: Q:
  
  jqGrid column with a select list that emulates Html.DropDownListFor
  
  I'm attempting to use jqGrid for a fairly complex UI.  The grid will eventually need to have a drop down column, an autocomplete, and a button column.  For now, I'm having trouble figuring out how to set up a column with a select list that populates values from an IEnumerable on my model, sets the initial selected value from a property on my model, and changes that property when the user changes the value of the select list.  For example, say I have these models:
  public class GridRowModel 
  {
      public int GridRowModelId { get; set; }
      public string SomeText { get; set; }
      public int SomeSelectOptionId { get; set; }
  }
  
  public class SelectOption 
  {
      public int SomeSelectOptionId { get; set; }
      public string Description { get; set; }
  }
  
  public class SomeModel {
      public int SomeModelId { get; set; }
      public IEnumerable<GridRowModel> GridRowModels { get; set; }
      public IEnumerable<SelectOption> AllSelectOptions { get; set; }
  }
  
  The AllSelectOptions property of SomeModel is set up in the controller, along with everything else on the model.  The controller also has a method GetSomeModelGridRows that returns an array of GridRowModel objects for the jqGrid rows. Then, I have Razor that looks something like this:
  @model SomeModel
  <table id="someModelGridRows" cellpadding="0" cellspacing="0"></table>
  <div id="pager" style="text-align: center;"></div>
  <script type="text/javascript">
      $(document).ready(function() {
          $("#someModelGridRows").jqGrid({
              url: '@Url.Action("GetSomeModelGridRows")',
              datatype: 'json',
              mtype: 'POST',
              colNames: ['GridRowModelId', 'Text', 'Select Option'],
              colModel: [
                  { name: 'GridRowModelId', index: 'GridRowModelId', hidden: true },
                  { name: 'SomeText', index: 'SomeText' },
                  { name: 'SomeSelectOptionId', index: 'SomeSelectOptionId', edittype: 'select', 
  
  **?? is this where I would do something and if so, what ??**
  
              ],
              //the rest of the grid stuff
          });
      });
  </script>
  
  In a non-grid situation, this would be simple using the Html.DropDownListFor helper.  Is there a way I can use this here?  Am I going about this all the wrong way and/or is this even possible?
  
  A:
  
  I think I figured this out using TPeczek's Lib.Web.Mvc and his very helpful sample project.  Lib.Web.Mvc is available on Nuget, and is good at encapsulating the data format necessary for returning JSON from the controller to the grid.  For anyone who has this issue in the future....
  Controller:
  [AcceptVerbs(HttpVerbs.Post)]
  public ActionResult GetClientContactsAndProviders(JqGridRequest request)
  {
      var clientId = CookieHelper.GetClientIdCookieValue();
      var contacts = _clientRepo.GetContactsForClient(clientId).ToList();
      //I do not want paging, hence TotalPagesCount = 1.
      //PageIndex increments automatically in JqGridResponse, so start at 0.
      var response = new JqGridResponse
                         {
                             TotalPagesCount = 1,
                             PageIndex = 0,
                             TotalRecordsCount = contacts.Count
                         };
      foreach(var contact in contacts)
      {
          response.Records.Add(new JqGridRecord(contact.Id.ToString(),
                                                new List<object>
                                                    {
                                                        contact.Id,
                                                        contact.ClientId,
                                                        contact.ClientContactId,
                                                        contact.ContactId,
                                                        contact.ContactTypeId,
                                                        contact.Description,
                                                        contact.ContactName,
                                                        contact.ContactPhone,
                                                        string.Empty,
                                                        contact.ContactComments
                                                    }));
      }
      return new JqGridJsonResult {Data = response};
  }
  
  Then, the drop-down list is populated in a partial view with a model of Dictionary<int, string>:
  @model Dictionary<int, string>
  <select>
      <option value=""></option>
      @foreach(KeyValuePair<int, string> value in Model)
      {
          <option value="@value.Key.ToString()">@value.Value</option>
      }
  </select>
  
  Write an Action that returns the dictionary in the partial:
  public ActionResult ContactTypes()
  {
      var contactTypes = new Dictionary<int, string>();
      var allTypes = _cacheService.Get("contacttypes", _contactRepo.GetAllContactTypes);
      allTypes.ToList().ForEach(t => contactTypes.Add(t.ContactTypeId, t.Description));
      return PartialView("_SelectList", contactTypes);
  }
  
  Finally, the grid itself (Razor), with the drop-down list defined in the Type column:
  $(document).ready(function () {
      $("#clientContacts").jqGrid({
          url: '@Url.Action("GetClientContactsAndProviders")',
          datatype: 'json',
          mtype: 'POST',
          cellEdit: true,
          cellsubmit: 'clientArray',
          scroll: true,
          colNames: ['Id', 'ClientId', 'ClientContactId', 'ContactId', 'HiddenContactTypeId', 'Type', 'Who', 'Phone', '', 'Comments'],
          colModel: [
              { name: 'Id', index: 'Id', hidden: true },
              { name: 'ClientId', index: 'ClientId', hidden: true },
              { name: 'ClientContactId', index: 'ClientContactId', hidden: true },
              { name: 'ContactId', index: 'ContactId', hidden: true },
              { name: 'HiddenContactTypeId', index: 'HiddenContactTypeId', hidden: true },
              {
                  name: 'Type',
                  index: 'ContactTypeId',
                  align: 'left',
                  width: 180,
                  editable: true,
                  edittype: 'select',
                  editoptions: {
                      dataUrl: '@Url.Action("ContactTypes")',
                      dataEvents: [
                          {
                              type: 'change',
                              fn: function (e) {
                                  var idSplit = $(this).attr('id').split("_");
                                  $("#clientContacts").jqGrid('setCell', idSplit[0], 'HiddenContactTypeId', $(this).attr('value'), '', '');
                              }
                          }
                      ]
                  },
                  editrules: { required: true }
              },
              { name: 'Who', index: 'ContactName', width: 200, align: 'left', editable: true, edittype: 'text' },
              { name: 'Phone', index: 'ContactPhone', width: 100, align: 'left', editable: false },
              { name: 'Button', index: 'Button', width: 50, align: 'center' },
              { name: 'Comments', index: 'ContactComments', width: 240, align: 'left', editable: true, edittype: 'text' }
          ],
          pager: $("#pager"),
          rowNum: 20,
          sortname: 'Id',
          sortorder: 'asc',
          viewrecords: true,
          height: '100%'
      }).navGrid('#pager', { edit: false, add: true, del: false, search: false, refresh: false, addtext: 'Add Contact/Provider' });
  });
  
  Hopefully this helps someone in the future, and thanks again to @TPeczek.
  
  