title: Save Search Filter Of Jqgrid Using Custom Button On Search Diaglog
body: <p>I have added a button on search dialog of jqgrid for saving search criteria in database and use it for later. 
  On the click of that button i need the filters property jqgrid of search criteria. </p>
  
  <p><a href="http://i.stack.imgur.com/31J5x.png" rel="nofollow">http://i.stack.imgur.com/31J5x.png</a>
  [Snap Shot]
  when user click on save button (custom button added by me in search dialog) i had ask for filter name using dialog and then save it with the filter.</p>
  
  <p>when search button is click i don't want to reload the grid base on search criteria.</p>
  
  <p>but i am unable to get the filter property to store in data base.</p>
  
  <p>i had use afterRedraw event but this is not give the last filter that i had add.</p>
  
  <p>so please reply me soon.</p>
  
  <p>Thanks in advance.  </p>
  
  <pre><code>var grid = jQuery("#list_records").jqGrid({
          url: "getGridData.php?" + window.location.search.substring(1),
          searchurl: "getGridData.php?" + window.location.search.substring(1),
          datatype: 'json',
          mtype: "GET",
          colNames: ["Task Id", "Title", "Priority", "tags", "Created Date", "Last Update Date", "Complete Date"],
          colModel: [
                      { name: 'Task_ID', index: 'Task_ID', width: 200},
                      { name: 'Title', index: 'Title', width: 200 },
                      { name: 'Priority', index: 'Priority', width: 200},
                      { name : 'tags', index : 'tags', width : 200},
                      { name : 'Created_Date', index : 'Created_Date', width : 200},
                      { name : 'Last_Updated', index : 'Last_Updated', width : 200},
                      { name : 'Completed_date', index : 'Completed_date', width : 200}
                  ],
          sortname: 'Task_ID',
          viewrecords: true,
          rownumbers: true,
          sortorder: "desc",
          ignoreCase: true,
          pager: '#perpage',
          caption: "Task Results",
          rowNum: 30,
          ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
          });
  
  grid.jqGrid('navGrid','#perpage', {add:false,edit:false,del:false,search:false,refresh:false}).jqGrid('navButtonAdd','#perpage',{
                 caption: "",
                 title : "Search",
                 id : "filterManipulation",
                 buttonicon:"ui-icon-search", 
                 onClickButton: function (){
                      //console.log(JSON.stringify(filterForSearch));
                      $("#list_records").setGridParam({
                           postData: { filters: JSON.stringify(filterForSearch)}
                      });
  
                      $("#list_records").jqGrid('searchGrid', 
                          {multipleSearch:true, overlay:false, searchOnEnter:true, multipleGroup:true, closeOnEscape:true, showQuery:true,recreateFilter: true,
                          afterShowSearch : function(){
                              var element = document.getElementById("fbox_list_records_2").getElementsByTagName("tr")[1].getElementsByTagName("td")[1];
                              var saveAnchor = document.createElement('a');
                              saveAnchor.setAttribute('id', 'fbox_list_save_query');
                              saveAnchor.setAttribute('class', 'fm-button ui-state-default ui-corner-all fm-button-icon-left');
                              saveAnchor.setAttribute('onclick','saveSearch()');
                              saveAnchor.innerHTML = buttonName;
                              var newAnchor = document.createElement('a');
                              newAnchor.setAttribute('id', 'fbox_list_new_filter');
                              newAnchor.setAttribute('class', 'fm-button ui-state-default ui-corner-all fm-button-icon-left');
                              newAnchor.setAttribute('onclick','newFilter()');
                              newAnchor.innerHTML = 'New';
                              element.appendChild(newAnchor);
                              element.appendChild(saveAnchor);                    
  
                              var tableDataTag = document.createElement("td");
                              tableDataTag.setAttribute('id','tdForFilterNameList');
                              var filterNameList = document.createElement("select");
                              filterNameList.setAttribute('id','filterNameList');
                              filterNameList.setAttribute('onChange','loadFilterAttribute()');
                              var option = new Option("--Select--", "0");
                              filterNameList.appendChild(option);
                              &lt;?php
                                  $userId = 0;
                                  $conn = new mysqli("localhost", "root", "$$$$", "$$$");
                                  if (mysqli_connect_errno()){
                                      echo "Failed to connect to MySQL: " . mysqli_connect_error();
                                  }
                                  $sql = "select filter_id,filter_name from filters where userID = $userId ";
                                  //print $sql;
                                  $result = $conn-&gt;query($sql);
                                  if($result)
                                  {
                                      while ($row = $result-&gt;fetch_assoc()) {
                              ?&gt;
                                          var optionTag = document.createElement("option");
                                          optionTag.setAttribute("value", "&lt;?php echo $row['filter_id']?&gt;");
                                          var text = document.createTextNode("&lt;?php echo $row['filter_name']?&gt;");
                                          optionTag.appendChild(text);
                                          if(selectedValue == "&lt;?php echo $row['filter_id']?&gt;"){
                                              optionTag.setAttribute("Selected", "true");
                                          }
                                          //option = new Option('&lt;?php echo $row['filter_name']?&gt;', '&lt;?php echo $row['filter_id']?&gt;');
                                          filterNameList.appendChild(optionTag);
                              &lt;?php 
                                      }
                                  }
                              ?&gt;
                              tableDataTag.appendChild(filterNameList);
                              var elementForDropDown = document.getElementById("fbox_list_records").getElementsByTagName("table")[0].getElementsByTagName("tr")[0];
                              elementForDropDown.appendChild(tableDataTag);
                          },
                          onSearch: function() {
                              var postData = grid.jqGrid('getGridParam','postData');
                              var $filter = $("#" + $.jgrid.jqID("fbox_" + this.id)),
                              sql = $filter.jqFilter('toSQLString');
                              $("#list_records").setGridParam({url: "getGridData.php?" + window.location.search.substring(1) + "&amp;sqlQuery=" + escape(sql)});
                              $("#list_records").trigger("reloadGrid");
                              loadgridData(postData, sql);    
                              fusionChart(postData, sql); 
                              return false;
                          }, 
                          onReset : function() {
                              var postData = grid.jqGrid('getGridParam','postData');
                              $("#list_records").setGridParam({url: "getGridData.php?" + window.location.search.substring(1)});
                              $("#list_records").trigger("reloadGrid");
                              loadgridData(postData, ''); 
                              fusionChart(postData, '');  
                              return false;
                          },
                          onClose: function(){
                              filterForSearch = "";
                              buttonName = "Save";
                              selectedValue = "";
                          },
                          afterRedraw: function (p) {
                              console.log(p.filter);
                          }
                      });
                  }, 
                 position:"last"
          });
  </code></pre>
  
  <p>In above code i had added custom nav button.
  this code is for loading search filter of user .
  way to store and edit filter .</p>
  
  <p>But what should i do to get filter where save button click.</p>
  
  <p><a href="http://i.stack.imgur.com/sU00x.png" rel="nofollow">http://i.stack.imgur.com/sU00x.png</a></p>