2

We are using advanced search in the latest version of jqGrid, and our search dialog is configured to be always visible on the page above the grid. The structure of our data lists is dynamic. Thus, when we are going to display a list, we first do an ajax call to get the list of columns for the grid. We then construct the data model for the grid and make a request for the data.

Currently, in the request to get the columns, we return the data type of the column. If the data is a date, we display a date picker in the search form. However, some of our customers HATE having to use <= >= for date ranges. They want to be able to pick a date column and then set a start and end date using two side-by-side date pickers. I've been pushing them off for a while now because they have the ability to do date range searches, but the complaining isn't stopping. (It's more clicks to add the second filter with the end date)

Is there any way I can modify jqGrid to give me a date range control when I am configuring a search on a date column? I really don't want to have to set up an external search dialog UI just to deal with these complaints, but product-management is pushing really hard to get "normal" date ranges for the grids.

enter image description here

Amy Anuszewski
  • 1,843
  • 17
  • 30

2 Answers2

1

You can create your own custom search dialog. See this question which I asked couple days ago.

using setGridParam to change your postData array and include extra values in the filters JSON object that will be carried over to your server side where you can dissect it. In your case you can pass over your data range Start and End inside the filter item of the postData. Then reload your jqGrid like this

    var $grid = $("#list');
    //$grid.setGridParam({datatype:'json', page:1}).trigger('reloadGrid');
    var post_data = {searchField:'',searchString:'', searchOper:'',
            filters:'{"groupOp":"OR","rules":['+
                    '{"field":"Date","op":"ge","data":"2012-04-23"},'+
                            '{"field":"Date","op":"lt","data":"2012-04-25"}' +
                            ']}'
    };
    $grid.setGridParam({postData:post_data}).trigger('reloadGrid');

The above will save the postData array with the new config and the reloadGrid sends a request to the server with the new postData array. This will preserve the paging as well; however, to get the old view of your grid (without search terms) you need to implement the reset button separately too and trigger reloadGrid after that for this to take effect.

Not sure if you have solved your problem by now; however, I am putting this solution here for any one from the future who has the same issue.

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

As far I know there is no way to do this, but to write it yourself.

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_searching

Filter jqGrid Data by Date Range?

Community
  • 1
  • 1
Jaco
  • 1,149
  • 1
  • 9
  • 14
  • I wonder if there is some sort of callback I could hook into if a date column is selected. Then, I could set up the second filter for them automatically. Also, if I could somehow add extra 'operations' for the search so that I could use the words 'From' and 'To' in the user interface and then just translate those words on the server side to set up my query. – Amy Anuszewski Apr 03 '12 at 23:24
  • There is no event that fires when you select a column for search, nor an event that fires when you add a row for search. The only events that are available are described here: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:singe_searching#options – Jaco Apr 04 '12 at 06:31