title: jqGrid boolean or enumeration dropdown filtering for columns
body: <p>I'm using jqGrid to display tabular data on my first ASP.NET MVC 3 and find it really useful, particularly filtering down data.  For string-type I use the column-filtering with "contains" and that works wonderfully for culling out the strings.  For the date data I use the date picker.  Great.</p>
  
  <p>Now I've got a few columns (e.g., "Contains nuts") which are essentially boolean values.  I want to provide a way to filter these.  Right now they are displayed as "true" and "false" and use the same string-based filtering that my string-type columns use.  That's a bit clunky.  I think what I'd like to do instead is have a way to choose one of three values (true/false/both) via a dropdown mechanism.</p>
  
  <p>My current colModel has an entry like so for my 'boolean' field:</p>
  
  <pre><code>{ name: 'ContainsNuts', 
    index: 'ContainsNuts', 
    align: 'left', 
    searchoptions: { sopt: ['eq, 'ne']} 
  }
  </code></pre>
  
  <p>which only works when the user types in 'false' or 'true' - again, clunky.</p>
  
  <p>For a few other columns, I wanted to use dropdowns for enumerations, e.g., I have a 'Cones' column, since there are quite a few rows and I page the results - using the auto complete text filtering is a bit hit-or-miss for the user to find all the possible values.  Hope that makes sense.</p>
  
  <p>So what I've tried is this - I created a controller action that looks like so:</p>
  
  <pre><code>public JsonResult AvailableCones()
  {
     var context = new IceCreamEntities();
     var query = context.Cones.AsQueryable().Distinct();
     List&lt;string&gt; all = query.Select(m =&gt; m.Name).ToList();
     return Json(all, JsonRequestBehavior.AllowGet);
  }
  </code></pre>
  
  <p>And I did something like this [perhaps convoluted approach] to create a dropdown selection in the filtering dialog for Cones in my document ready:</p>
  
  <pre><code>...
  
  createSearchSelection = function (someValues) {
     var outputValues = "";
     if (someValues &amp;&amp; someValues.length) {
        for (var i = 0, j = someValues.length; i &lt; j; ++i) {
           var entry = someValues[i];
           if (outputValues.length &gt; 0) {
              outputValues += ";";
           }
           outputValues += entry + ":" + entry;
        }
     }
     return outputValues;
  }
  
  setTheSearchSelections = function (colName, url){
     $('#icecreamgrid').jqGrid('setColProp', colName,
        {
           stype: 'select',
           searchoptions: {
              value: createSearchSelection(url),
              sopt: ['eq']
           }
        });
  }
  
  gotData = function(data) {
     setTheSearchSelections('ConeType', data);
  }
  
  var url = "/IceCream/AvailableConeTypes";
  $.get(url, null, gotData);
  </code></pre>
  
  <p>The result is that I get a drop-down for the ConeType column in the search dialog and the correct rows shows up in the column.  Great.  That's pretty cool that it works.</p>
  
  <p>What I don't know how to do, however, is to get a dropdown to show up in my column header filter just like the one that now shows up in the filter dialog.  How can I augment what I have to make this happen?  Secondly, how can I make what I've got work for boolean values?  </p>