6

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.

itsmatt
  • 31,265
  • 10
  • 100
  • 164

1 Answers1

16

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");
            }
        }    
    });
}
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • 1
    That's works pretty well Oleg. Thanks. Hitting Esc causes the GET to happen but I can live with that - I'm not pulling back that much data. I might be able to call a func that checks before calling triggerToolbar(). – itsmatt Jul 29 '11 at 18:14
  • 1
    Probably you should better call `triggerToolbar` inside of `onSelect` and not inside of `onClose`? You can describe exactly in which situation you want to force toolbar searching and in which not. In general the `onSelect` is the event which are called if the user choose new date. – Oleg Jul 29 '11 at 19:25
  • @itsmatt: You are welcome! I changed the code from my answer follow other directly to the better way. – Oleg Jul 29 '11 at 20:20
  • 1
    @itsmatt: I thought a little about the problem and tried to made a demo. Now I think that the usage of `onSelect` like I described here is not the best in case of the usage both Advanced Searching and the Filter Toolbar. I will examine the problem more exactly at the weekend and will post more information later. – Oleg Jul 29 '11 at 21:36
  • @itsmatt: I modified the answer one more time. Now it works in case both kind of searching. – Oleg Jul 30 '11 at 00:30
  • I had also same issue while hitting enterkey when select date, now resolved. Thankx for valuable solution. – Siddiqui Aug 05 '11 at 02:51
  • @Farhan Siddiqui: You are welcome! By the way if you would more vote the answers which was *helpful* for you other people would better find it. The searching engine use voting counter as the main criteria for the order of the searching results. – Oleg Aug 05 '11 at 06:32