CODEWITHSUNDEEP
jqgrid
Amy Anuszewski
Amy Anuszewski

Reputation: 1853

Date Ranges in jqGrid Searches

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

Upvotes: 2

Views: 4802

Answers (2)

Mickey Mouse
Mickey Mouse

Reputation: 1771

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.

Upvotes: 1

Jaco
Jaco

Reputation: 1169

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?

Upvotes: 0

Related Questions