CODEWITHSUNDEEP
jqueryjqgriddatepicker
Tony
Tony

Reputation: 12705

How to reload jQGrid with the search input values

I've binded the DatePicker plugin for one of the jqGrid's column. All I want to do is to refresh the whole grid after I select a date. The code below reloads the grid, but it makes a simple GET request, without any search parameters. How to fix it ?

    $(function () {
        $("#list").jqGrid({
            url: '/Control/BookstoreInvoicesGridData/',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['Invoice #', 'Created', 'Customer ID', 'Total Amount', 'PaymentType'],
            colModel: [
      { name: 'OrderID', index: 'OrderID', width: 20, align: 'center', sortable: true, search: true },
      { name: 'Created', index: 'Created', width: 40, align: 'center', sortable: true, search: true },
      { name: 'CustomerName', index: 'CustomerName', width: 60, align: 'center', sortable: true, search: true },
      { name: 'TotalAmount', index: 'TotalAmount', width: 40, align: 'center', sortable: true, search: false },
      { name: 'PaymentType', index: 'PaymentType', width: 40, align: 'center', sortable: true, search: false}],
            pager: jQuery('#pager'),
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: 'OrderID',
            sortorder: "desc",
            viewrecords: true,
            imgpath: '/scripts/themes/coffee/images',
            width: '800'
        });

        $('#gs_Created').datepicker({
            onSelect: function (dateText, inst) {
                var e = $("#list").data("events");
                if (typeof (e) !== "undefined" && typeof (e.reloadGrid) !== "undefined") {
                    $("#list").trigger("reloadGrid");
                }
            } 
        }
        );
    });

Upvotes: 4

Views: 8941

Answers (4)

roberto
roberto

Reputation: 31

Thanks, to me it served to recharge the grid data by parameters:

$('#buttonsearch').on('click', function () {
    jQuery("#mygrid").jqGrid('setGridParam', { 
        postData: { nit: $("#myparameter").val() }
    }, 
    { page: 1 }).trigger('reloadGrid');            
});

Upvotes: 2

Oleg
Oleg

Reputation: 221997

You don't included the call of filterToolbar in your code, but from the name '#gs_Created' I can suppose that you use toolbar searching

var grid = $("#list"),
    datePick = function (elem) {
        $(elem).datepicker({
            changeYear: true,
            changeMonth: true,
            showButtonPanel: true,
            onSelect: function () {
                if (this.id.substr(0, 3) === "gs_") {
                    // call triggerToolbar only in case of searching toolbar
                    setTimeout(function () {
                        grid[0].triggerToolbar();
                    }, 100);
                }
            }
        });
    });

grid.jqGrid({
    url: '/Control/BookstoreInvoicesGridData/',
    ...
    // sortable: true, search: true are already default 
    // you can change other default values using cmTemplate
    cmTemplate: {align: 'center', width: 40},
    colModel: [
        { name: 'OrderID', index: 'OrderID', width: 20 },
        { name: 'Created', index: 'Created',
            searchoptions: { dataInit: datePick, attr: { title: 'Select Date'} } },
        { name: 'CustomerName', index: 'CustomerName', width: 60 },
        { name: 'TotalAmount', index: 'TotalAmount' },
        { name: 'PaymentType', index: 'PaymentType'}
    ],
    pager: '#pager',
    gridview: true,
    height: 'auto',
    ...
});

And please remove imgpath: '/scripts/themes/coffee/images' parameter which will be not used since many years in jqGrid (see here).

Upvotes: 2

Tony
Tony

Reputation: 12705

Here's the solution, if everyone else would have the same problem.

datePick = function (elem) {
            jQuery(elem).datepicker();
        }

$("#list").jqGrid({    
....
{ name: 'Created', [...] stype: 'text', searchoptions: { dataInit: datePick, attr: { title: 'Select Date'} } },
....
});

Upvotes: 0

Stelian Matei
Stelian Matei

Reputation: 11623

You could change the URL of the jqGrid to send your current parameters:

    var url = '/Control/BookstoreInvoicesGridData/?date=' + $(this).val();
    $("#list").jqGrid('setGridParam', { url: url });
    $("#list").trigger("reloadGrid");

Upvotes: 3

Related Questions