title: jqgrid dynamic search options on search
body: <p>Below I have copied my jqGrid and trimmed out a lot of unrelated attributes and such, however the base code below is enough to encapsulate my question. </p>
  
  <p>I have a dynamic filter that is populated upon successful return of the ajax call. The json that is returned holds the string value of the drop down (uniqueRunDates) among other values. The string (uniqueRunDates) is dynamically added to the column using the 'setColProp'. Upon completion of the jgGrid the next line of code in the function calls a reload of the grid and the new filter takes in place. </p>
  
  <p>The filter works great just as a static(like 'JobStatus') filter does with one exception. Searching. </p>
  
  <p>The grid has three searches (text box and two drop downs [one being the uniqueRunDates])that can be used interchangeably. When a user types something in the text box, the grid is correctly updated, the return json has the new unique dates, and I add them via the 'setColProp'. The final piece to that is the 'reloadGrid' must be called. The issue is how do I do that???</p>
  
  <p>In the first go around, the code after the creation of the grid is executed. When a search is performed, just this jgGrid code is executed. I can not put the 'reloadGrid' in the success call of course as that will make a loop. I have attempted to use the 'afterSearch' property of the toolbar, but that doesnt appear to be firing when i need it to be. </p>
  
  <p>Am I going about this issue the right way? Is there an easier way to handle this seemly common concept? Dynamic search filters? Thanks very much for any help and/or guidance you can provide. </p>
  
  <pre><code> $("#gridTable").jqGrid({
      async: false,
      datatype: function (jqGridModel) {
          $.ajax({
              async: false,
              url: 'Application.aspx/getJqGridData',
              data: JSON.stringify({ 'rptPath': rptPath, 'jqGridModel': jqGridModel, 'userId': userId }),
              success: function (data, textStatus, jqXHR) {
                  populateGrid(data);
                  var uniqueRunDates = (JSON.parse(data)).uniqueDates;
  
                  $("#gridTable").jqGrid('setColProp', 'Run_Date', {
                      stype: 'select',
                      searchoptions: { value: uniqueRunDates, sopt: ['dateEq'] }
                  });
              }                
          });
      },
      colNames: ['', 'Report Name', 'Run Status', 'Run Date', 'Expiring On', 'Category', 'Actions'],
      colModel: [
         { name: 'Run_Date', index: 'RunDate', align: 'center', title: false, sortable: true, width: 40 }
         { name: 'Report_Name', index: 'ReportNameDisplay', align: 'left', title: false, sortable: true, formatter: reportLinkFormatter },
         { name: 'Run_Status', index: 'JobStatus', align: 'left', title: false, sortable: true, width: 50,
              stype: 'select',
              searchoptions: { value: ':All Status;Completed:Completed;Failed:Failed;Pending:Pending;No Data Returned:No Data Returned;:Returned' }
          },
      ],
      pager: jQuery('#gridPager'),
      rowNum: 15,
      rowList: [15, 25, 35, 50],
      sortname: 'RunDate',
      sortorder: "desc",
      height: '100%',
      multiselect: true
      }
  });
  
  //Refresh necessary for the dynamically added 'run date' filter.
  $("#gridTable").trigger("reloadGrid");
  
  $('#gridTable').jqGrid('filterToolbar', {
      stringResult: true
  });
  </code></pre>
  
  <p>.
  .
  .
  .
  .</p>
  
  <p><strong>Update</strong>
  I have updated the grid to follow the suggestions below. </p>
  
  <p>I am able to query the server, and return the string version of the JSON object. I am also able to see the return value in the 'beforeProcessing' method and it appears good. However the grid no longer populates. I am not certain the jsonReader is setup properly with my return format. data.d = {"total":2,"page":1,"records":25,"rows":[{"id":"23","cell":["0","xxx","xxx",...]}....]</p>
  
  <p>I am thinking it is something with the types not lining up... ideas?</p>
  
  <pre><code>$("#gridTable").jqGrid({
      async: false,
      url: 'Application.aspx/getJqGridData',
      ajaxGridOptions: { contentType: "application/json" },
      serializeGridData: function (postData) {
          if (postData.filters == undefined) postData.filters = null;
          postData.jqGridModel = { page: postData.page, _search: postData._search, rows: postData.rows,
              sidx: postData.sidx, sord: postData.sord, filters: postData.filters
          };
          postData.rptPath = rptPath;
          postData.userId = userId;
          return JSON.stringify(postData);
      },
      contentType: 'application/json; charset=utf-8',
      datatype: "json",
      mtype: 'POST',
      beforeProcessing: function (data) {    
      },
      colNames: ['', 'Report Name', 'Run Status', 'Run Date', 'Expiring On', 'Category', 'Actions'],
      colModel: [
          { name: 'Is_Fav', index: 'Favorites', align: 'center', title: false, sortable: false, search: false, width: 5, formatter: favImageFormatter },
          { name: 'Report_Name', index: 'ReportNameDisplay', align: 'left', title: false, sortable: true, formatter: reportLinkFormatter },
          { name: 'Run_Status', index: 'JobStatus', align: 'left', title: false, sortable: true, width: 50,
              stype: 'select',
              searchoptions: { value: ':All Status;Completed:Completed;Failed:Failed;Pending:Pending;No Data Returned:No Data Returned;:Returned' }
          },
          { name: 'Run_Date', index: 'RunDate', align: 'center', title: false, sortable: true, width: 40,
              selectOptions: {
                  dataUrl: 'Application.aspx/getJqGridData',
                  buildSelect: function (data) {
                      var gData;
                      if (data.hasOwnProperty('d')) gData = data.d;
                      else gData = data;
  
                      var uniqueRunDates = (JSON.parse(gData)).uniqueDates;
  
                      var html = '&lt;select&gt;', length = gData.length, i = 0, item;
                      for (; i &lt; length; i++) {
                          item = d[i];
                          html += '&lt;option value=' + item + '&gt;' + item + '&lt;/option&gt;';
                      }
                      html += '&lt;/select&gt;';
                      return html
                  }
              }
          },
          { name: 'Expiring_On', index: 'ExpirationDate', align: 'center', title: false, sortable: true, width: 40, search: false },
          { name: 'Category', index: 'Category', align: 'left', title: false, sortable: true, width: 80 },
          { name: 'Actions', index: '', align: 'left', title: false, sortable: false, width: 25, search: false, formatter: actionsFormatter }
      ],
      pager: jQuery('#gridPager'),
      rowNum: 15,
      rowList: [15, 25, 35, 50],
      sortname: 'RunDate',
      sortorder: "desc",
      height: '100%',
      viewrecords: true,
      sortable: true,
      jsonReader: {
          root: "d.rows",
          page: "d.page",
          total: "d.total",
          records: "d.records"            
      },
      forceFit: true,
      multiselect: true,
      loadError: function (jqXHR, textStatus, errorThrown) {
          alert(jqXHR.responseText);
      },
      gridComplete: function () {
          doGridComplete(rptPath);
      },
      beforeSelectRow: function (rowid, event) {
          // Only allow row selection if the chekbox in the row is clicked
          var index = $.jgrid.getCellIndex(event.target);
          if (index == 0) {
              return true;
          }
          return false;
      },
      subGrid: true,
      subGridRowExpanded: function (subgrid_id, row_id) {
          getReportDetails(subgrid_id, row_id, rptPath);
      }
  });
  
  $('#gridTable').jqGrid('filterToolbar', {
      stringResult: true
  });
  </code></pre>