jqGrid DatePicker filtering without hitting Enter key

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

Leave a Comment