jqGrid: POST data to server to fetch row data (filtering and searching)

Question

I have a form like this:

<form id='myForm'>
<input type='text' name='search' />
<input type='text' name='maxPrice' />
</form>

and table for my jqGrid:

<table id='myGrid'></table>

I need to POST (not GET) the data from myForm to my server method in order to fetch the row data and populate the grid. So far, I've not been able to get jqGrid to POST anything. I double-checked my data serialization and it is serializing my form data properly. Here is my jqGrid code:

$("#myGrid").jqGrid({
    url: '/Products/Search") %>',
    postData: $("#myForm").serialize(),
    datatype: "json",
    mtype: 'POST',
    colNames: ['Product Name', 'Price', 'Weight'],
    colModel: [
        { name: 'ProductName', index: 'ProductName', width: 100, align: 'left' },
        { name: 'Price', index: 'Price', width: 50, align: 'left' },
        { name: 'Weight', index: 'Weight', width: 50, align: 'left' }
    ],
    rowNum: 20,
    rowList: [10, 20, 30],
    imgpath: gridimgpath,
    height: 'auto',
    width: '700',
    //pager: $('#pager'),
    sortname: 'ProductName',
    viewrecords: true,
    sortorder: "desc",
    caption: "Products",
    ajaxGridOptions: { contentType: "application/json" },
    headertitles: true,
    sortable: true,
    jsonReader: {
        repeatitems: false,
        root: function(obj) { return obj.Items; },
        page: function(obj) { return obj.CurrentPage; },
        total: function(obj) { return obj.TotalPages; },
        records: function(obj) { return obj.ItemCount; },
        id: "ProductId"
    }
});

Can you see what I'm doing wrong or should be doing differently?

Answer 1

Your main error is the usage of the postData parameter in the form:

postData: $("#myForm").serialize()

This usage has two problems:

1. The value $("#myForm").serialize() overwrite all parameters of the POST requests instead of the adding additional parameters.
2. The value $("#myForm").serialize() will be calculated only once during the grid initialization time. So you will send always search="" and maxPrice="" to the server.

I suggest you to to replace the form with named edit fields to

<fieldset>
<input type='text' id='search' />
<input type='text' id='maxPrice' />
<button type='button' id='startSearch'>Search</button>
</fieldset>

define postData parameter as object with methods:

postData: {
    search: function() { return $("#search").val(); },
    maxPrice: function() { return $("#maxPrice").val(); },
},

and add onclick event handler to the "Search" button (see above HTML fragment)

$("#startSearch").click(function() {
    $("#myGrid").trigger("reloadGrid");
});

Moreover you write nothing about the server technology which you use. It can be some additional modification is required to be able to read parameters on the server side (for example serializeRowData: function (data) {return JSON.stringify(data);} see this and this). I recommend you also to read another old answer: How to filter the jqGrid data NOT using the built in search/filter box.

Some other small errors like '/Products/Search") %>' instead of '/Products/Search' or the usage of deprecated parameter imgpath (see documentation) are less important. The default column options like align: 'left' should be better removed.

Consider also to use searching in the grid. For example advance searching

$("#myGrid").jqGrid('navGrid','#pager',
                    {add:false,edit:false,del:false,search:true,refresh:true},
                    {},{},{},{multipleSearch:true});

and also toolbar searching:

$("#myGrid").jqGrid('filterToolbar',
                    {stringResult:true,searchOnEnter:true,defaultSearch:"cn"});

it can probably replace the searching form which you use.