2

I have been fancying the idea of creating my own search dialog to create the search criteria that differs from the approach mentioned in the jqGrid documentation. This for many reasons, including but not limited to the good support of date ranges, more user-friendly search dialogue , etc.

I just would like to know if anyone has attempted the creation of this flow and how effective it is as a workaround to create your own complex search before diving into implementing it:

  1. create a dialog where user insert the information required for search (different than the current one for the advanced custom search of jqGrid)
  2. The request sent to the server and retrieved as JSON which I can insert in the grid using addJSONData method.
  3. jqGrid will preserve the paging for the searched values such that the paging will work correctly (with the fetched data based on the search criteria) once the next and previous buttons are hit.

So the question is: can I make the next and previous navigations work for me if I change the filters using setGridParam to include the same data used in the search for the process of navigation. This could happen when the onPaging event is triggered and with simple logic which dictates that the paging is happening for a searched data?

Thanks a lot.

Mickey Mouse
  • 1,731
  • 3
  • 24
  • 40

1 Answers1

3

First of all I can mention, that I am a little pessimistic about implementation of custom searching dialog. The reason is that you will invest much time in the implementation. I would you better recommend to use custom controls inside of standard searching dialog. After applying the changes which I suggested it is now possible.

Look at the demo which allows you to create searching dialog like

enter image description here

In the way you can solve many problems which you described in your question.

If you do decide to create custom searching dialog you will have to do the following:

  • The new searching dialog should add information about the searching criteria in postData properties.
  • reload the grid using .trigger.("reloadGrid")

You don't need make separate Ajax request to the server. Reloading of the grid is what you need to do.

If you want to save the information about the filter in the postData.filters you have to hold the standard format. In the case you can have advantage of local data filtering (datatype: 'local' or the usage of loadonce: true). See the demo from the answer as an example.

If you want to implement filtering of data on the server side only you can use any format of additional properties (please don't use the same name filters). If you want to have searching filter (controls) always visible on the page I would recommend you to use the technique with postData properties as function (see the answer).

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • are you saying that adding the search info obtained from the customized search dialog to `postData` and then `reloadGrid` will preserve any future `next` and `previous` paging? – Mickey Mouse Apr 23 '12 at 17:38
  • I am not sure that I understand what you mean. What you mean with "next" and "previous" paging? Could you specify which values of `datatype` and `loadonce` you want to support? What is your standard situation: local searching or searching on the server? Any information from `postData` will be send to the server, but not all will be interpreted on local filtering. – Oleg Apr 23 '12 at 17:45
  • sorry if wasn't clear. The "next" and "previous" paging is what I mean when the user tries to view other pages in the grid which are populated with the searched data obtained from the server as `JSON`. In this case the grid is set with `loadonce = false` and `datatype = 'json'`. I am not trying to implement paging on the local data fetched from the searched result, but rather on the server side, I am just thinking for the future in case the obtained searched data is too huge be cached locally. – Mickey Mouse Apr 23 '12 at 17:56
  • @nawar: If the user click on "Next" or "Previous" button or if the user type any page number directly it will be just changed the `page` parameter of jqGrid. Immediately after that the grid will be reloaded and the data from `postData` parameter, `page` parameter, `rowNum` parameter (as `rows`) and some other will be sent to the server. The names of the parameters are defined by [prmNames](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options). So there are no searching and paging communication with the server. It will be always just use `url` parameter and additional parameters are sent. – Oleg Apr 23 '12 at 18:20
  • Great, I believe it's more clear right now; given that after changing `postData` to include the search criteria, future paging will be taking care of by jqGrid (a request sent to the server every time a new page is requested). Thanks @Oleg for your help and the prompt response, it saved me lots of time down the road :) – Mickey Mouse Apr 23 '12 at 18:32
  • @nawar: You are welcome! You can just trace HTTP traffic with respect of Fiddler, Firebug or "Network" tab of Developer Tools of IE or Chrome. You will see all parameters which will be sent to the server. So the communication is simple. The only typical misunderstanding is that the value of `_search` property of `postData` will be get from `search` option of jqGrid like `rows` part get from `rowNum`. – Oleg Apr 23 '12 at 18:48