Question

My data is on the server side, I have code written to do all the searching/filtering/ordering.

My jqGrid has both a filterToolbar, and a search button.

Unfortunately, when I search, the value I pick for the date, is not sent in the request. However, oddly, it DOES send it when it’s the filterToolbar’s selected date?!?

Why is there nothing in data here?

{"groupOp":"AND","rules":[{"field":"RunDate","op":"le","data":""}]}

Here is my code for the grid.

var loadFileInfoList = function (fileInfoList, pager) {
    fileInfoList.jqGrid({
        url: 'GetFiles',
        datatype: 'json',
        mtype: 'POST',
        colNames: ['Id', 'Name', 'Interface', 'Amount', 'Type', 'Created', 'Status'],
        colModel: [
                { jsonmap: 'Id', name: 'Id', formatter: 'integer', align: 'right', hidden: true },
                { jsonmap: 'Name', name: 'Name', align: 'right', hidden: true },
                { jsonmap: 'InterfaceName', name: 'InterfaceName', align: 'left', width: '100%', sorttype: 'text', frozen: true,
                    search: true,
                    searchoptions: {
                        sopt: ['cn']
                    }
                },
                { jsonmap: 'Amount', name: 'Amount', formatter: 'currency', align: 'right', width: '100%', sorttype: 'number',
                    search: true,
                    searchoptions: {
                        sopt: ['ge', 'le']
                    }
                },
                { jsonmap: 'Type', name: 'Type', align: 'right', width: '100%', sorttype: 'text',
                    search: true, stype: 'select',
                    searchoptions: {
                        value: getTypeFilterOptions(),
                        sopt: ['eq']
                    }
                },
                { jsonmap: 'RunDate', name: 'RunDate', formatter: 'date', align: 'right', width: '100%', sorttype: 'date',
                    search: true,
                    datefmt: 'dd/mm/yyyy',
                    searchrules: {
                        date: true
                    },
                    searchoptions: {
                        sopt: ['ge', 'le'],
                        dataInit: function (elem) {
                            $(elem).datepicker({
                                dateFormat: 'dd/mm/yy',
                                changeYear: true,
                                changeMonth: true,
                                showButtonPanel: true,
                                onSelect: function () {
                                    $(this).keydown();
                                }
                            });
                        }
                    }
                },
                { jsonmap: 'Status', name: 'Status', align: 'right', width: '100%', sorttype: 'text', formatter: formatStatus,
                    search: true, stype: 'select',
                    searchoptions: {
                        value: getStatusFilterOptions(),
                        sopt: ['eq']
                    }
                }
            ],
        autoencode: true,
        sortname: 'RunDate',
        sortorder: 'desc',
        pager: pager,
        rowNum: 5,
        viewrecords: true,
        height: '100%',
        autowidth: true,
        ignoreCase: true,
        jsonReader: {
            repeatitems: false,
            root: "rows"
        },
        altRows: true,
        altclass: 'jqGridAltRow',
        loadComplete: function () {
            $("tr.jqgrow:odd").addClass('jqGridAltRow');
        }
    });

    fileInfoList.jqGrid('navGrid', pager,
        { edit: false, add: false, del: false },
        {},
        {},
        {},
        { closeOnEscape: true, closeAfterSearch: true, multipleSearch: true, multipleGroup: false }
    );

    fileInfoList.jqGrid('filterToolbar', { searchOnEnter: false, enableClear: true, stringResult: true });
};

loadFileInfoList($('#jqgFileInfoList'), '#jqgPagerFileInfoList');

Answer 1

I suppose that you can solve the problem by changing onSelect callback of datepicker. You can change

onSelect: function () {
    $(this).keydown();
}

to

onSelect: function () {
    $(this).trigger('change');
}

You can use also more complex construct which I posted in the answer or a little more simple form from here.