jqGrid DatePicker filtering without hitting Enter key

I'm building my first ASP.NET MVC 3 app and using jqGrid. One of my columns, "Flavor Created", is a date column and I'd like to filter the grid on that column using the DatePicker. Here's what currently happens: The user clicks on the column header filter box, the date picker is displayed and then the user chooses the year, month and clicks a day. The picker goes away and leaves the date, say, 03/28/2009, in the text box. To actually get the filter to work, I have to click into that box and hit the Enter key, which is a bit annoying for the user.

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

(As an aside, I am not sure what the use of the 'Done' button is for since the picker goes away whenever I click a day. Perhaps that is a setting I'm missing.)

Anyone else needed this functionality 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 suggest, but that didn't seem to work.

Solution 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: Starting with the version 4.3.3 jqGrid initialize the DOM of grid as this of dataInit. Thus one don't need to use myGrid variable in the above code. Instead of that one 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 options parameter of dataInit, which contains additional information, like the mode property. The value of mode property is "filter" in case of calling inside of the filter toolbar (and "search" in case of searching dialog). Thus one can use the following code

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");
            }
        }    
    });
}