title: How to add dynamic filter drop down using Jqgrid?
body: <p>I have the following working code that searches the table using the jqgrid tool bar.</p>
  
  <p>I want to add a dynamic drop down for the "Symbol" column, so that the drop will reflect the dynamic value of that column.
  Also, I want to disable the search for  TotalValue and MaxLoan.</p>
  
  <p>My <a href="https://jsfiddle.net/dev2020/615qovew/7/" rel="nofollow">JSFIDDLE</a></p>
  
  <p>Code</p>
  
  <pre><code>$(document).ready(function() {
      var jsonData = {
        "Name": "Julie Brown",
        "Account": "C0010",
        "LoanApproved": "12/5/2015",
        "LastActivity": "4/1/2016",
        "PledgedPortfolio": "4012214.00875",
        "MaxApprovedLoanAmt": "2050877.824375",
        "LoanBalance": "1849000",
        "AvailableCredit": "201877.824375",
        "Aging": "3",
        "Brokerage": "My Broker",
        "Contact": "Robert L. Johnson",
        "ContactPhone": "(212) 902-3614",
        "RiskCategory": "Yellow",
        "rows": [{
          "ClientID": "C0010",
          "Symbol": "WEC",
          "Description": "Western Electric Co",
          "ShareQuantity": "20638",
          "SharePrice": "21.12",
          "TotalValue": "435874.56",
          "LTVCategory": "Equities",
          "LTVRatio": "50%",
          "MaxLoanAmt": "217937.28"
        }, {
          "ClientID": "C0010",
          "Symbol": "BBB",
          "Description": "Bins Breakers and Boxes",
          "ShareQuantity": "9623",
          "SharePrice": "74.29125",
          "TotalValue": "714904.69875",
          "LTVCategory": "Equities",
          "LTVRatio": "50%",
          "MaxLoanAmt": "357452.349375"
        }, {
          "ClientID": "C0010",
          "Symbol": "GPSC",
          "Description": "Great Plains Small Cap Stock",
          "ShareQuantity": "49612",
          "SharePrice": "14.24",
          "TotalValue": "706474.88",
          "LTVCategory": "Mutual Funds - Small Cap",
          "LTVRatio": "40%",
          "MaxLoanAmt": "282589.952"
        }]
      },
      mmddyyyy = "";
    /*********************************************************************/
  
  
    $("#output").jqGrid({
      url: "/echo/json/",
      mtype: "POST",
      datatype: "json",
      postData: {
            json: JSON.stringify(jsonData)
      },
      colModel: [
        /**    { name: 'ClientID', label:'ClientID',width: 80, key: true },****/
        {
          name: 'Symbol',
          width: 65
        }, {
          name: 'Description',
          width: 165
        }, {
          name: 'ShareQuantity',
          align: 'right',
          width: 85,
          classes: "hidden-xs", labelClasses: "hidden-xs",
          formatter: 'currency',
          formatoptions: {
            prefix: " ",
            suffix: " "
          }
        }, {
          name: 'SharePrice',
          label: 'Share Price',
          align: 'right',
          width: 100,
          classes: "hidden-xs", labelClasses: "hidden-xs",
          template: "number",
          formatoptions: {
            prefix: " $",
            decimalPlaces: 4
          }
        },
        /*{ label: 'Value1', 
                    name: 'Value1', 
                    width: 80, 
                    sorttype: 'number', 
                    formatter: 'number',
                    align: 'right'
                }, */
        {
          name: 'TotalValue',
          label: 'Total Value',
          width: 160,
          sorttype: 'number',
          align: "right",
          formatter: 'currency',
          formatoptions: {
            prefix: " $",
            suffix: " "
          }
        }, {
          name: 'LTVRatio',
          label: 'LTV Ratio',
          width: 70,
          sorttype: 'number',
          align: "right",
          formatter: 'percentage',
          formatoptions: {
            prefix: " ",
            suffix: " "
          }
        }, {
          name: 'LTVCategory',
          label: 'LTV Category',
          classes: "hidden-xs", labelClasses: "hidden-xs",
          width: 120,
          width: 165
        },
  
        {
          name: 'MaxLoanAmt',
          label: 'MaxLoanAmount',
          width: 165,
          sorttype: 'number',
          align: "right",
          formatter: 'currency',
          formatoptions: {
            prefix: " $",
            suffix: " "
          }
        }
  
      ],
      additionalProperties: ["Num1"],
      /*beforeProcessing: function (data) {
          var item, i, n = data.length;
          for (i = 0; i &lt; n; i++) {
              item = data[i];
              item.Quantity = parseFloat($.trim(item.Quantity).replace(",", ""));
              item.LTVRatio = parseFloat($.trim(item.LTVRatio *10000).replace(",", ""));
              item.Value = parseFloat($.trim(item.Value).replace(",", ""));
              item.Num1 = parseInt($.trim(item.Num1).replace(",", ""), 10);
              item.Num2 = parseInt($.trim(item.Num2).replace(",", ""), 10);
          }
      }, */
      iconSet: "fontAwesome",
      loadonce: true,
      rownumbers: true,
      cmTemplate: {
        autoResizable: true,
        editable: true
      },
      autoResizing: {
        compact: true
      },
      autowidth: true,
      height: 'auto',
      forceClientSorting: true,
      sortname: "Symbol",
      footerrow: true,
      caption: "&lt;b&gt;Collateral Value&lt;/b&gt; &lt;span class='pull-right' style='margin-right:20px;'&gt;Valuation as of: " + mmddyyyy + "&lt;/span&gt;",
  
  
      loadComplete: function() {
        var $self = $(this),
          sum = $self.jqGrid("getCol", "Price", false, "sum"),
          sum1 = $self.jqGrid("getCol", "MaxLoanAmt", false, "sum");
        //ltvratio =  $self.jqGrid("getCol","LTVRatio:addas", "Aved Loan Amount");
        $self.jqGrid("footerData", "set", {
          LTVCategory: "Max Approved Loan Amount:",
          Price: sum,
          MaxLoanAmt: sum1
        });
      }
    });
  
    $("#output").jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch : "cn"});
  
  
      $(window).on("resize", function () {
          var newWidth = $("#output").closest(".ui-jqgrid").parent().width();
          $("#output").jqGrid("setGridWidth", newWidth, true);
      });
  });
  </code></pre>