how to customiz data before send to server in jqGrid search

Question

i'm starter in jqGrid. i write this code for Genereate Grid

grid.jqGrid({
    url: 'jQGridHandler.ashx',
    postData: { ActionPage: 'Report5',type:'Fill' },
    datatype: 'json',
    height: 530,
    colNames: ['id','UnitPrice'],
    colModel: [
        { name: 'Id', sortable: true, search: true, editable: false, hidden: true,
            key: true },
        { name: 'UnitPrice', shrinkToFit: true, width: 50,
            searchoptions: {
                sopt: ['eq', 'ne', , 'le', 'ge'],
                dataInit: function (elem) {
                    $(elem).keyup(function () {
                        var str = $(this).val();
                        str = str.replace( /,/g, "" );
                        $(this).val(addCommas(str));
                    });
                }
            }}
    ],
    gridview: true,
    search: true,
    rowNum: 100,
    rowList: [100, 200, 300],
    pager: '#pager',
    viewrecords: true,
    rownumbers: true,
    footerrow: true, userDataOnFooter: true, altRows: true,
});
grid.jqGrid('navGrid', '#pager', { add: false, edit: false, del: false, search: true },
    {},
    {},
    {},
    { multipleSearch: true });
grid.jqGrid('filterToolbar', { defaultSearch: 'cn', stringResult: true });

function addCommas(nStr) {
    nStr += '';
    var x = nStr.split('.');
    var x1 = x[0];
    var  x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;

    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

i want user when in search box select unitPrice and type number, number 3 char 3 char sperate with ,, i write function addCommas and work good, bute when user enter price and press search button the unit price not send to server. example in this picture

and after click in search button

please help me. thanks all

Answer 1

There are many ways how you can modify the searching filter before sending to the server.

First of all I would recommend you to call change event explicitly everytime when you change the data in the input field. Searing Dialog hold internally representation of the searching filter and modify it in the change event handler. So adding $(this).change(); or $(this).trigger('change') could fix some of your current problems.

By the way you have seen that the information about the searching filter will be send to the server as filters parameter. You can get it as filters property of postData. To get the reference to postData parameter you can use grid.jqGrid("getGridParam", "postData").

The callback beforeSearch of filterToolbar is one place where you can access the filters before sending to the server. onSearch is another callback used by searching dialog. To have common way I would recommend you to use beforeRequest callback of jqGrid. Inside of the callback you can get postData using $(this).jqGrid("getGridParam", "postData") and if has filters property you can modify it. The example of modification of filters property you will find in the answer for example.