Question

I’m trying to add a Datepicker filter on a JQGrid toolbar. When I click on the date filter, no problem the Datepicker shows up, but when I select my date, nothing happen. The date I’ve chose doesn’t appear in the toolbar filter and of curse no search is launch.
Did I miss something?
Here is my code:

colModel: [                     
    { name: 'Period', index: 'Period', align: 'left', formatter: 'date',
        search: true,
        searchoptions: {
        dataInit: function (el) {
            $(el).datepicker({
                changeYear: true,
                changeMonth: true,
                showButtonPanel: true,
                dateFormat: 'dd-mm-yy',
                onSelect: function(dateText, inst) {
                    $("#grid_id")[0].triggerToolbar();
                }
            });
        }
    }}
]

Thanks in advance for your help!

Answer 1

The problem with the searching toolbar is that the code from onSelect callback could be executed too early. So you should start the code in another thread and allow the current work be done till the end:

colModel: [                     
    { name: 'Period', index: 'Period', align: 'left', formatter: 'date',
        search: true,
        searchoptions: {
        dataInit: function (el) {
            $(el).datepicker({
                changeYear: true,
                changeMonth: true,
                showButtonPanel: true,
                dateFormat: 'dd-mm-yy',
                onSelect: function () {
                    if (this.id.substr(0, 3) === "gs_") {
                        // call triggerToolbar only in case of searching toolbar
                        setTimeout(function () {
                            $("#grid_id")[0].triggerToolbar();
                        }, 100);
                    }
                }
            });
        }
    }}
]

The test for id of the current <input> field I inserted to be sure that we don’t try to use triggerToolbar in searching dialog. I mean that one can combine searching toolbar for simple searching with advanced searching for more complex searching requests.