jqGrid - how to reset search options?

Question

Using jqGrid multiple searching how can you programatically "clear" the search options?

The "clear" should ensure no filters are being sent to the server and that the GUI search box does not contain any search criteria..

We are currently calling trigger("reloadGrid"). We'd like to call a clearSearchCrieria() type method before reloadGrid so that no filters are passed to the server or show up in the GUI search box..

??

Solution 1

You could use the following method:

function clearSearchOptions(){
    $("#list").jqGrid('setGridParam', { search: false, postData: { "filters": ""} }).trigger("reloadGrid");
}

But as Oleg pointed out, you will have to use the recreateFilter:true option in your jqgrid definition if you want the jqgrid search box to be cleared as well.

Solution 2

To reset filters you can modify the postData parameter of jqGrid directly. You can access it with $("#list").jqGrid('getGridParam','postData') or $("#list")[0].p.postData. If a filter is set, the properties of the postData look like following:

_search      true           Boolean
nd           1286296925096  Number
page         1              Number
rows         10             Number
searchField  "id"           String
searchOper   "lt"           String
searchString "5"            String
sidx         "id"           String
sord         "desc"         String

To reset the properties you can do following

var postdata = $("#list").jqGrid('getGridParam','postData');
postdata._search = false;
postdata.searchField = "";
postdata.searchOper = "";
postdata.searchString = "";

If you use Advanced Searching instead of Single Searching you should clear filters property instead of searchField, searchOper and searchString.

At the end you can call $("#list").trigger("reloadGrid",[{page:1}]); to reload the grid contain starting with the page number 1.

Solution 3

To click the "reset" button try:

$(".ui-reset").click();

Solution 4

It will reset all search options

$('input[id*="gs_"]').val("");

Solution 5

The only way I could get it right - and I'm sure its not the right way is as follows:

$("#grid").jqGrid('setGridParam', { postData: { filters: null} });
$("#gs_ColName1").val("");
$("#gs_ColName2").val("");

where ColNameX are the names of your columns

View more solutions

Comments

[Marcus Leon]

Will try that - my post might be slightly misleading.. What I'm trying to do is clear the search options and call trigger("reloadGrid"). Your suggestion might work.. though would prefer to not literally call click.. would like to call a clearSearchOptions() method then call trigger("reloadGrid")

[Marcus Leon]

Thanks Oleg - but this doesn't appear to reset the grid's search UI. That is the prior search criteria still show up when you click the search button in the nav bar. I'd like to clear these out.

[Oleg]

@Marcus: You asked how to reset jqGrid search options. So I understood that you opened Search dialog set options and then close the search dialog. The search options stay saved in the jqGrid. So I answered how th reset the options. What you then mean? By the way do you use recreateFilter:true option?

[Marcus Leon]

We don't use the recreateFilter option.. if we manually set postdata, the search data stays saved in the grid - how do you remove the search from the grid so the gui doesn't show any search options selected?

[Oleg]

@Marcus: Could you explain what scenario you mean? Why do you decide that "the search data stays saved in the grid"? What do you mean? How one can reproduce your problem and which behavior exactly you want to have in jqGrid? In general there are search filter in the grid (as a part of postData) and there are a search dialog which will be hide or show. If you use recreateFilter:true option the dialog will be always new created instead of showing previously created hide dialog.

[Marcus Leon]

We have our search icon on the nav. Users can click this button, search on multiple fields - all this works great. We have another filter option outside of the grid control. If users select another type of filter, we change the grid url and call reloadGrid. But when we call reloadGrid the filter options that the user selected with the grid search are still present. What is the best way to clear out the grid search criteria?

[Oleg]

@Marcus: It is exactly the scenario which I mean as I wrote my answer. If the code from my answer not work then try var sdata={searchField:"",searchOper:"",searchString:""}; $.extend($("#list")[0].p.postData,sdata); $("#list")[0].p.search=false;

[Marcus Leon]

Tried both - couldn't get either to work - search GUI still has prior selections in place. As I'm using the advanced search I modified your last example slightly to use var sdata={filters:""};

[Oleg]

@Marcus: I can repeat only once. You should post a full code example then I'll try to modify it so that it will work.

[Jimbo]

@Oleg: I was really happy to see the recreateFilter option on jqgrid. I also have an external jqgrid filter and wanted jqgrid's search button to reflect what the external filter was filtering. It works the first time jqgrid's search is clicked only :( then if you change the external filter and click jqgrid's search button again, it shows the old filter...

[Jimbo]

@Marcus: I found that using recreateFilter: true and Oleg's solution of resetting search params above or even using Mark's answer below (except I use $(".ui-icon-refresh").trigger("click");) works great. The jqgrid search panel resets itself too :)

[Oleg]

@Jimbo: Hi! In my opinion the values recreateFilter:true and recreateForm:true for the form editing should be default settings of jqGrid. Without the settings one can has strange effects and spend many time in debugging. By the way my other old answer stackoverflow.com/questions/3974324/… and the corresponding demo example ok-soft-gmbh.com/jqGrid/CheckboxesWithVerticalHeaders1.htm could be probably interesting for you.

[Paschalis]

ideed! Thank you! I combined your last two lines, to clean the search boxes and the first, but additionally i triggered reload!

[Joseph]

Making a simple change to $(':input[id*="gs_"]').val(""); will find all form elements, which includes select boxes.

[Dot_NET Pro]

thanks, it worked for me: i was unable to SET data in Subgrid, so i wrote $("#Subgrid").jqGrid('setGridParam', { search: false, postData: { "filters": "" } }); $("#Subgrid").setGridParam({ 'data': SubgridData }).trigger('reloadGrid', [{ page: 1 }]);

[Madhan Ayyasamy]

@Jimbo I don't think so reloadGrid is mandatory, For me its worked without triggering reloadGrid. Anyway Thanks for the tips.