title: Custom dropdown formatter for jQuery jqGrid
body: <p>I am trying to format a cell on jqGrid so that when the user edits it they are presented with a custom implementation of a combobox (called activecombo) as the select html component is ugly.</p>
  
  <p>I have read <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3acustom_formatter" rel="nofollow">this</a> and looked at the demos but they don't seem to do quite what I want. Here's what I have tried:</p>
  
  <pre><code>    var maritalStatusPickerFunction = function(cellvalue, options,
              rowObject) {
          var optionsArray = [ {
              "id" : 1,
              "status" : "Married"
          }, {
              "id" : 2,
              "status" : "Divorced"
          }, {
              "id" : 3,
              "status" : "Separated"
          }, {
              "id" : 4,
              "status" : "Widowed"
          }, {
              "id" : 5,
              "status" : "Unmarried"
          }
  
          ];
          var comboInput = $("&lt;input type='text' value='" + cellvalue
                  + "' /&gt;");
          comboInput.activecombo( {
              source : optionsArray
          });
          return comboInput;
      };
  
      $('#relationshipsGrid').jqGrid( {
          datatype : "local",
          colNames : [ 'Contact', 'Relationship' ],
          colModel : [ {
              name : 'contact',
              index : 'contact',
              width : 420
          }, {
              name : 'relationship',
              index : 'relationship',
              editable : true,
              formatter : maritalStatusPickerFunction,
              width : 120
          } ],
          width : 600,
          height : 100,
          cellEdit : true,
          editurl : "server.php"
      });
  </code></pre>
  
  <p>But that's obviously not what I am supposed to do as this just displays Object object in an input in a cell.</p>
  
  <p>Can anyone give me any pointers?</p>
  
  <p>Thanks,</p>
  
  <p>Amy</p>