I want users to be able to filter grid data without using the intrinsic search box.
I have created two input fields for date (from and to) and now need to tell the grid to adopt this as its filter and then to request new data.
Forging a server request for grid data (bypassing the grid) and setting the grid's data to be the response data wont work - because as soon as the user tries to re-order the results or change the page etc. the grid will request new data from the server using a blank filter.
I cant seem to find grid API to achieve this - does anyone have any ideas? Thanks.
I had the same requirements, and (with Oleg's help) came up with this:
Basically, the user starts typing in the "Employee name" textbox, and immediately the results get shown in the jqGrid.
Details of how I implemented this are here:
jqGrid - Change filter/search pop up form - to be flat on page - not a dialog
Note that I specifically load all of the JSON data for my jqGrid in advance, and that for large data sets, there is a delay when running this code on an iPhone/Android device as you type each character.
But, for desktop web apps, it's a great solution, and makes jqGrid much friendler for the user.
By using
ReloadGrid()
andjquery
functions you can make your own custom filtering functions.You problem can be very easy solved with respect of
postData
parameter including functions andtrigger('reloadGrid')
. I try explain the idea more detailed.Let us use
mtype: "GET"
. The only thing which standard search/filter box do after displaying the interface is appending of some additional parameters to the url, sending to server and reloading the grid data. If you have your own interface for searching/filtering (some select controls or checkboxes, for example) you should just append your url yourself and reload the grid with respect oftrigger('reloadGrid')
. For resetting of the information in the grid you can choose any way which you prefer. For example, you can include in the select controls which you have an option like "no filtering".To be more exact your code should looks like the code from the answer how to reload jqgrid in asp.net mvc when i change dropdownlist:
If user change selected option in select box with
id=StateId
or another select box withid=CityId
(with mouse or keyboard), the functionmyReload
will be called, which just force reloading of data in jqGrid. During corresponding$.ajax
request, which jqGrid do for us, the value frompostData
parameter will be forwarded to$.ajax
asdata
parameter. If some from properties ofdata
are functions, these function will be called by$.ajax
. So the actual data from select boxes will be loaded and all the data will be appended to the data sent to the server. You need only implement reading of this parameters in your server part.So the data from the
postData
parameter will be appended to the url (symbols '?' and '&' will be added automatically and all special symbols like blanks will be also encoded as usual). The advantages of the usage ofpostData
is:postData
parameter allows you to load actual values from all used controls to the moment of reloading;If you use some "no filtering" or "all" entries in the select box
StateId
, you can modify the function which calculate the value ofStateId
parameter which should appended to the server url fromto something like following:
On the server side you should makes no filtering for
StateId
if you receive an empty value as a parameter.Optionally you can use
myGrid.setCaption('A text');
to change a grid title. This allow user to see more clear, that the data in grid are filtered with some criteria.