JqGrid DatePicker filtering without pressing the enter key

Question

I am building my first ASP.NET MVC 3 application and using jqGrid. One of my columns, Created Fragrance, is a date column, and I would like to filter the grid in that column using a DatePicker. Here's what is currently happening: the user clicks on the column header filter field, displays the date selection, and then the user selects the year, month, and clicks per day. The collector leaves and leaves the date, say, 03/28/2009, in the text box. To actually make the filter work, I have to click on it and press the Enter key, which annoys the user a bit.

Is there a way to automatically activate the filter when the user clicks that day?

(Aside, I’m not sure that the “Finish” button is used, since the collector leaves whenever I click on the day. Perhaps this is a parameter that I miss.)

Has anyone else needed this feature and solved it?

I tried to do something like this:

dataInit: function (elem) { $(elem).datepicker({ changeYear: true, changeMonth: true, showButtonPanel: true, onSelect: function (dateText, inst) { $("#icecreamgrid")[0].trigger("reloadGrid"); } }) } 

as I saw someone on some website, but that doesn't seem to work.

Answer 1

You can try with

 dataInit: function (elem) { $(elem).datepicker({ changeYear: true, changeMonth: true, showButtonPanel: true, onSelect: function() { if (this.id.substr(0, 3) === "gs_") { // in case of searching toolbar setTimeout(function(){ myGrid[0].triggerToolbar(); }, 50); } else { // refresh the filter in case of // searching dialog $(this).trigger("change"); } } }); } 

UPDATED : since version 4.3.3 jqGrid initializes the DOM of the grid as this from dataInit . Thus, in the above code, you do not need to use the myGrid variable. Instead, you can use:

 dataInit: function (elem) { var self = this; // save the reference to the grid $(elem).datepicker({ changeYear: true, changeMonth: true, showButtonPanel: true, onSelect: function() { if (this.id.substr(0, 3) === "gs_") { // in case of searching toolbar setTimeout(function () { self.triggerToolbar(); }, 50); } else { // refresh the filter in case of // searching dialog $(this).trigger("change"); } } }); } 

Free jqGrid calls with the second parameter options dataInit , which contains additional information, such as the mode property. The value of the mode property is "filter" in case of a call inside the filter toolbar (and "search" in the case of a search dialog). Thus, the following code can be used

 dataInit: function (elem, options) { var self = this; // save the reference to the grid $(elem).datepicker({ changeYear: true, changeMonth: true, showButtonPanel: true, onSelect: function() { if (options.mode === "filter") { // in case of searching toolbar setTimeout(function () { self.triggerToolbar(); }, 0); } else { // refresh the filter in case of // searching dialog $(this).trigger("change"); } } }); }