title: how to rebind jqgrid with a button
body: <p>I want to rebind my jqgrid.  Here is my script code to bind grid:</p>
  
  <pre><code>  $(document).ready(function () {
  
          var categoryId = $('#&lt;%=hdnCategoryId.ClientID %&gt;').val();
  
          var productName = $('#tags').val();
  
          jQuery("#tblList").jqGrid({
              url: 'ArenaProductList.aspx/GroupProductList',
              mtype: 'POST',
              datatype: 'json',
              postData: {
                  sidx: '',
                  sord: '',
                  page: '',
                  rows: '',
                  categoryId: categoryId,
                  productName: productName
              },
              ajaxGridOptions: { contentType: "application/json" },
              serializeGridData: function (postData) {
                  var propertyName, propertyValue, dataToSend = {};
                  for (propertyName in postData) {
                      if (postData.hasOwnProperty(propertyName)) {
                          propertyValue = postData[propertyName];
                          if ($.isFunction(propertyValue)) {
                              dataToSend[propertyName] = propertyValue();
                          } else {
                              dataToSend[propertyName] = propertyValue;
                          }
                      }
                  }
                  return JSON.stringify(dataToSend);
              },
              jsonReader: {
                  root: "d.rows",
                  page: "d.page",
                  total: "d.total",
                  records: "d.records"
              },
              colNames: ['ArenaProductId', 'Açıklama', 'Ana Kategori', 'Alt Kategori', 'Marka', 'KDV', 'Stok', 'Bayi Fiyatı', 'Son Kullanıcı Fiyatı', 'Para Birimi', 'Yüzde'],
              colModel: [
                  { name: 'ArenaProductId', index: 'ArenaProductId', hidden: true },
                  { name: 'Description1', index: 'Description1', width: 150 },
                  { name: 'MainGroupCode', index: 'MainGroupCode', width: 150 },
                  { name: 'SubGroupCode', index: 'SubGroupCode', hidden: true },
                  { name: 'Brand', index: 'Brand', width: 220 },
                  { name: 'Kdv', index: 'Kdv', width: 120 },
                  { name: 'Stock', index: 'Stock', width: 100 },
                  { name: 'DealerPrice', index: 'DealerPrice', width: 100 },
                  { name: 'Price', index: 'Price', width: 100 },
                  { name: 'Currency', index: 'Currency', width: 100 },
                  { name: 'Rate', index: 'Rate', width: 100 }
              ],
              pager: '#tblPager',
              rowList: [10, 20, 30],
              sortname: 'UserId',
              sortorder: 'desc',
              rowNum: 10,
              loadtext: "Yukleniyor....",
              shrinkToFit: false,
              multiselect: false,
              emptyrecords: "Kayit Bulunamadi",
              autowidth: true,
              shrinkToFit: true,
              height: "400",
              width: "740",
              rownumbers: true,
              //subGrid: true,
              caption: 'Arena Ürünler'
          });
          jQuery("#tblList").jqGrid('navGrid', '#prod_pager',
              { edit: false, add: false, del: false, excel: false, search: false });
  
          $('#ddlSubCategory').change(function () {
              $('#tags').val('');
              $('#&lt;%=hdnCategoryId.ClientID %&gt;').val($('#&lt;%=ddlSubCategory.ClientID %&gt;').val());
              jQuery("#tblList").trigger('reloadGrid');
          });
  
          $('#ddlMainCategory').change(function () {
              $('#tags').val('');
              $('#&lt;%=hdnCategoryId.ClientID %&gt;').val($('#&lt;%=ddlMainCategory.ClientID %&gt;').val());
              jQuery("#tblList").trigger('reloadGrid');
          });
  
      });
  </code></pre>
  
  <p>And I have a submit button. I want to reload grid with different productName value after I click the button. Do you have any suggestion?</p>