title: JQGrid Load Dropdown list data
body: <p>In my JQGrid i need to load data dynamically to a dropdown list in "Company" column.</p>
  
  <p><strong>View:</strong></p>
  
  <pre><code>&lt;title&gt;jqGrid for ASP.NET MVC - Demo&lt;/title&gt;
      &lt;!-- The jQuery UI theme that will be used by the grid --&gt;    
      &lt;link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/redmond/jquery-ui.css" /&gt;
      &lt;!-- The Css UI theme extension of jqGrid --&gt;
      &lt;link rel="stylesheet" type="text/css" href="../../Content/themes/ui.jqgrid.css" /&gt;    
      &lt;!-- jQuery library is a prerequisite for jqGrid --&gt;
      &lt;script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.0.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;!-- language pack - MUST be included before the jqGrid javascript --&gt;
      &lt;script type="text/javascript" src="../../Scripts/trirand/i18n/grid.locale-en.js"&gt;&lt;/script&gt;
      &lt;!-- the jqGrid javascript runtime --&gt;
      &lt;script type="text/javascript" src="../../Scripts/trirand/jquery.jqGrid.min.js"&gt;&lt;/script&gt;  
  
      &lt;link rel="stylesheet" type="text/css" href="../../Content/MyStyle.css" /&gt;
  
      &lt;script type="text/javascript"&gt;
          var myGrid = $('#list');
          $(function () {
              $("#list").jqGrid({
                  url: '/JqGridClients/DynamicGridData/',
                  datatype: 'json',
                  mtype: 'GET',
  
                  colNames: ['Edit', 'Address', 'Company', 'Name','Delete'],
                  colModel: [
            { name: 'ClientID', index: 'ClientID', search: false, width:30 ,  align: 'left', formatter: PKId_formatter },
            { name: 'Address', index: 'Address', search: true, sortable: true, align: 'left' },
            { name: 'Company', index: 'Company', search: true, align: 'left', stype: 'select', searchoptions: { dataUrl:'&lt;%= Url.Action("GetDestinationList","JqGridClients") %&gt;'}},
            { name: 'Name', index: 'Name', search: true, sortable: true, align: 'left', searchoptions: { sopt: ['cn' ,'eq', 'ne']}},
            { name: 'DelClientID', index: 'DelClientID', search: false, width:45,  align: 'left', formatter: PKId_delete_formatter}],
                  pager: jQuery('#pager'),
                  rowNum: 10,
                   width: '100%',
                  height: '100%',
                  rowList: [5, 10, 20, 50],
                  sortname: 'ClientID',
                  sortorder: "desc",
                  viewrecords: true,
                  loadonce: true,
                  caption: 'Clients',
  
              }).navGrid('#pager', { search: true, edit: true, add: false, del: true, searchtext: "Search" });
  
                $("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: 'cn' });
  
                $("#list").setGridParam({data: results.rows, localReader: reader}).trigger('reloadGrid');
  
               // $("#pager").jqGrid('search', {multipleSearch: true,multipleGroup: true,recreateFilter: true,overlay: 0});
          });
  
         function PKId_formatter(cellvalue, options, rowObject) {
      return '&lt;a href="JqGridClients/Edit?id=' + cellvalue + '" class="ui-icon ui-icon-pencil" &gt;&lt;/a&gt;';
  }
  
   function PKId_delete_formatter(cellvalue, options, rowObject) {
     // return '&lt;a href="JqGridClients/Delete?id=' + cellvalue + '" onclick="return confirm("Are you sure want to delete?");" class="ui-icon ui-icon-trash"&gt;&lt;/a&gt;';
  return '&lt;a href="JqGridClients/Delete?id=' + cellvalue + '" onclick="return confirm(\'Are you sure want to delete?\');" class="ui-icon ui-icon-trash"&gt;&lt;/a&gt;';
  }
  
    &lt;/script&gt;  
  
      &lt;h2&gt;Index&lt;/h2&gt;
  
  &lt;table id="list" class="scroll" cellpadding="0" cellspacing="0"&gt;&lt;/table&gt;
  &lt;div id="pager" class="scroll" style="text-align:center;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>Controller Method to load data to dropdown</strong></p>
  
  <pre><code>public JsonResult GetDestinationList()
  {
      JqGridClientRepository rep = new JqGridClientRepository();
      IEnumerable&lt;Client&gt; clients = rep.GetClients();
      var li = from s in clients
               select new
               {
                   Company = s.Company
               };
      return Json(li, JsonRequestBehavior.AllowGet);
  }
  </code></pre>
  
  <p>Currently i can not see a dropdown list on JQGrid</p>