Search code examples
jqueryjqgrid

How do make datepicker onselect function works differently in toolbar search and advanced search in jqgrid


I want the onselect event only do his job only on toolfilter not in advanced search.

Here is my grid:

$('#grid').jqGrid({
            colNames: ['Title', 'date'],
            colModel: [
                { name: 'Title', index: 'Title', searchoptions: { sopt: ['cn']} },
                { name: 'date', index: 'date', search: true, searchoptions: {
                    sopt: ['deq', 'dge', 'dlt'],
                    dataInit: function (el) {
                        $(el).datepicker({ onSelect: function (dateText, inst) { $("#grid")[0].triggerToolbar(); } });
                    }
                }, width: 70
                }
              ],
            pager: jQuery('#pager'),
            hidegrid: false,
            sortname: "date",
            sortorder: "desc",
            rowNum: 20,
            rowList: [10, 20, 50, 100],
            autowidth: true,
            width: "100%",
            height: "100%",
            datatype: 'json',
            viewrecords: true,
            mtype: 'POST',
            url: '<url>'

        })

Solution

  • You can for example use the fact that the id of elements inside of searching toolbar will be cnstructed with "gs_" prefix. So the implementation could be about the following

    dataInit: function (elem) {
        $(elem).datepicker({
            changeYear: true,
            changeMonth: true,
            showButtonPanel: true,
            onSelect: function () {
                var $grid, grid;
                if (typeof (elem.id) === "string" && this.id.substr(0, 3) === "gs_") {
                    // in case of searching toolbar
                    $grid = $(elem).closest('div.ui-jqgrid-hdiv')
                                   .next('div.ui-jqgrid-bdiv')
                                   .find("table.ui-jqgrid-btable:first");
                    if ($grid.length > 0) {
                        grid = $grid[0];
                        if ($.isFunction(grid.triggerToolbar)) {
                            setTimeout(function(){
                                grid.triggerToolbar();
                            }, 50);
                        }
                    }
                } else {
                    // refresh the filter in case of
                    // searching dialog
                    $(this).trigger('change');
                }
            }    
        });
    }
    

    see the answer with very close code.