jqgrid searchToolbar datepicker not filtering

Question

I am now using jqGrid(version: jqGrid 4.14.1-pre, free jqGrid), and would like to have a search toolbar with a datepicker. When I click the textbox, the datepicker successfully pops up and it updates the textbox with the date I choose. However, it does not filter the data.

What I really wanted was sopt:["le"] but failed. For checking purpose, I tried the "eq" too. But in both cases, all the data rows disappear.

I did set the

loadonce:true

and tried

$('#list')[0].triggerToolbar();

Since I did use older version of jqGrid, I updated the latest version in GitHub and tried but still failed.

{label: 'LockedDate',   name: 'LockedDate',     index: 'LockedDate',    sorttype: 'date',   clearSearch: true,
        sortable: true,
        resizable: false,
        hidden: false,
        search: true,
        formatter: 'date', 
        formatoptions: {srcformat: 'm/d/Y h:i:s A', newformat: 'm/d/Y h:i:s A'},
        searchrules: {date: true},
        searchoptions: {
             sopt: ["le"],
            dataInit: function (element) {
                            $(element).datepicker({
                                    dateFormat: 'mm/dd/yy',
                                    changeYear: true,
                                    changeMonth: true,
                                    showButtonPanel: true,
                                    onSelect: function () {
                                        $(this).keydown();
                                        $('#list')[0].triggerToolbar();
                                                },
                                    onChange: function () { 
                                             $('#list')[0].triggerToolbar(); }
                                            })
                                        }
                                    }
                                }

As I remeber rightly, I saw Oleg's answers on stackoverflow (sorry, lost the link) talking about the datetime parsing problem in older version. Is my date format the cause?

Since other search toolbar works well, I don't think this is the problem of pager or grid itself. Could anyone please help me where I set the datepicker wrong??

Thank you! :)

I'm not sure whether this jqGrid code is needed, but just in case I will put:

$('#list').jqGrid({
    url: '/LockedObjects/GetLockedObjects',
    datatype: "json",
    contentType: "application/json; charset-utf-8",
    mtype: 'GET',

    colModel: [
        {label: 'LockedBy', name: 'LockedBy',index: 'LockedBy', sorttype: 'text',   clearSearch: true,},
        {
            label: 'LockedDate', name: 'LockedDate', index: 'LockedDate', sorttype:'date', clearSearch: true,
                sortable: true,
                resizable: false,
                hidden: false,
                search: true,
                formatter: 'date', 
                formatoptions: {srcformat: 'm/d/Y h:i:s A', newformat: 'm/d/Y h:i:s A'},
                searchrules: {date: true},
                searchoptions: {sopt: ["le"],
                                dataInit: function (element) {
                                        $(element).datepicker({
                                            dateFormat: 'mm/dd/yy',
                                            changeYear: true,
                                            changeMonth: true,
                                            showButtonPanel: true,
                                            onSelect: function () {
                                                $(this).keydown();
                                                $('#list')[0].triggerToolbar();
                                                },
                                            onChange: function () { $('#tbLockedPartiesHistory')[0].triggerToolbar(); }
                                            })
                                        }
                                }
                }],
    rowNum: 20,
    rowList: [20, 30, 50],
    sortName: 'LockedDate',
    ignoreCase: true,
    viewrecords: true,
    sortOrder: 'asc',
    loadonce: true,
    multiselect: true,
    jsonReader: {
        repeatitems: false,
        root: 'rows',
        page: 'page',
        total: 'total'
    },
    height: 'auto',
    pager: '#listPager',
    loadError: function (xhr, status, error) {
        console.log(xhr);
        console.log(status);
        console.log(error);
    }
});

$('#list').jqGrid('filterToolbar', {searchOnEnter: false, ignoreCase: true, searchOperators:true,defaultSearch: 'cn' });
$('#list').jqGrid('navGrid', '#listPager', {edit: false,
                                            add: false,
                                            del: false,
                                            refresh: true
                                            });
};

Answer 1

The following searchoptions should work:

searchoptions: {
    sopt: ["le"], // or any other search operation
    dataInit: function (element) {
        var self = this; // save the reference to the grid
        $(element).datepicker({
            dateFormat: 'mm/dd/yy',
            changeYear: true,
            changeMonth: true,
            showButtonPanel: true,
            onSelect: function () {
                setTimeout(function () {
                    self.triggerToolbar();
                }, 0);
            }
        });
    }
}

I'd recommend you to make some additional changes in your code to simplify it or to fix some options:

• there are no contentType option in jqGrid. To set contentType parameter of underlying jQuery.ajax function one should use ajaxGridOptions: { contentType: "application/json; charset-utf-8" }
• it's better to remove the options mtype: 'GET', ignoreCase: true, height: 'auto', which have default value for free jqGrid.
• the option sortOrder: 'asc' should be removed. There are exist no sortOrder option (only sortorder option with the default value 'asc'). In the same way the option sortName: 'LockedDate' is wrong and it will be ignored. The correct option will be sortname: 'LockedDate'.
• you should replace jsonReader: {repeatitems: false, root: 'rows', page: 'page', total: 'total' } to jsonReader: { repeatitems: false }. All other properties of root, page, total of jsonReader have default value and thus there can be skipped. In the most cases even jsonReader: { repeatitems: false } can be skipped because free jqGrid try to detect repeatitems.
• it's recommended to use pager: true instead of pager: '#listPager'. You can remove unneeded <div id="listPager"></div> from the HTML page. Free jqGrid will create the corresponding div automatically. You can skip the pager option in the methods navGrid, inlineNav and so on. The call of navGrid could be like $('#list').jqGrid('navGrid', {edit: false,..}); in the case.
• you can specify the default searching options like searchOnEnter: false, ignoreCase: true, searchOperators:true, defaultSearch: 'cn' inside of searching parameter of jqGrid. It simplifies the later usage of filterToolbar or searching dialog. For example, you can use jqGrid option searching: { searchOperators: true, defaultSearch: 'cn', closeOnEscape: true, searchOnEnter: true, multipleSearch: true, multipleGroup: true}.
• It's recommended to remove loadError callback. Free jqGrid has default callback, wich will display errors on loading jqGrid data from the server. The errors will be displayed in the div between the column headers and the grid body (see the picture). By specifying the loadError callback will will display less information as free jqGrid displays the default.
• you should cleanup colModel items. The definition of the column LockedBy: {label: 'LockedBy', name: 'LockedBy',index: 'LockedBy', sorttype: 'text', clearSearch: true,} should be replaced to { name: 'LockedBy', searchoptions: { clearSearch: true } }. The properties label, index, sortable, hidden, search of the column LockedDate should be removed and the property clearSearch: true should be moved inside of searchoptions.

You can consider to use multiPageSelection: true and forceClientSorting: true options of free jqGrid additionally.

The option forceClientSorting: true force local sorting and filtering of the data returned from the server before the first page will be displayed. If you use sortname: 'LockedDate', then the server have to sort the returned data by LockedDate. If you use the option forceClientSorting: true, then the server can return unsorted data and free jqGrid sort the data localy before displaying the first page.

The option multiPageSelection: true is described in the answer. The demo demonstrates the results. The option allows 1) hold the selection over the pages (one can select rows on one page, change the page, select rows on another page, go back to the first page and the previously selected rows will be hold) 2) one can pre-select rows.