how to rebind jqgrid with a button

Question

I want to rebind my jqgrid. Here is my script code to bind grid:

  $(document).ready(function () {

        var categoryId = $('#<%=hdnCategoryId.ClientID %>').val();

        var productName = $('#tags').val();

        jQuery("#tblList").jqGrid({
            url: 'ArenaProductList.aspx/GroupProductList',
            mtype: 'POST',
            datatype: 'json',
            postData: {
                sidx: '',
                sord: '',
                page: '',
                rows: '',
                categoryId: categoryId,
                productName: productName
            },
            ajaxGridOptions: { contentType: "application/json" },
            serializeGridData: function (postData) {
                var propertyName, propertyValue, dataToSend = {};
                for (propertyName in postData) {
                    if (postData.hasOwnProperty(propertyName)) {
                        propertyValue = postData[propertyName];
                        if ($.isFunction(propertyValue)) {
                            dataToSend[propertyName] = propertyValue();
                        } else {
                            dataToSend[propertyName] = propertyValue;
                        }
                    }
                }
                return JSON.stringify(dataToSend);
            },
            jsonReader: {
                root: "d.rows",
                page: "d.page",
                total: "d.total",
                records: "d.records"
            },
            colNames: ['ArenaProductId', 'Açıklama', 'Ana Kategori', 'Alt Kategori', 'Marka', 'KDV', 'Stok', 'Bayi Fiyatı', 'Son Kullanıcı Fiyatı', 'Para Birimi', 'Yüzde'],
            colModel: [
                { name: 'ArenaProductId', index: 'ArenaProductId', hidden: true },
                { name: 'Description1', index: 'Description1', width: 150 },
                { name: 'MainGroupCode', index: 'MainGroupCode', width: 150 },
                { name: 'SubGroupCode', index: 'SubGroupCode', hidden: true },
                { name: 'Brand', index: 'Brand', width: 220 },
                { name: 'Kdv', index: 'Kdv', width: 120 },
                { name: 'Stock', index: 'Stock', width: 100 },
                { name: 'DealerPrice', index: 'DealerPrice', width: 100 },
                { name: 'Price', index: 'Price', width: 100 },
                { name: 'Currency', index: 'Currency', width: 100 },
                { name: 'Rate', index: 'Rate', width: 100 }
            ],
            pager: '#tblPager',
            rowList: [10, 20, 30],
            sortname: 'UserId',
            sortorder: 'desc',
            rowNum: 10,
            loadtext: "Yukleniyor....",
            shrinkToFit: false,
            multiselect: false,
            emptyrecords: "Kayit Bulunamadi",
            autowidth: true,
            shrinkToFit: true,
            height: "400",
            width: "740",
            rownumbers: true,
            //subGrid: true,
            caption: 'Arena Ürünler'
        });
        jQuery("#tblList").jqGrid('navGrid', '#prod_pager',
            { edit: false, add: false, del: false, excel: false, search: false });

        $('#ddlSubCategory').change(function () {
            $('#tags').val('');
            $('#<%=hdnCategoryId.ClientID %>').val($('#<%=ddlSubCategory.ClientID %>').val());
            jQuery("#tblList").trigger('reloadGrid');
        });

        $('#ddlMainCategory').change(function () {
            $('#tags').val('');
            $('#<%=hdnCategoryId.ClientID %>').val($('#<%=ddlMainCategory.ClientID %>').val());
            jQuery("#tblList").trigger('reloadGrid');
        });

    });

And I have a submit button. I want to reload grid with different productName value after I click the button. Do you have any suggestion?

Answer 1

If you don't want to send sidx , sord , page and rows to the server you should use

prmNames: { page: null, rows: null, sort: null, order: null }

parameter of jqGrid instead of usage

postData: { sidx: '', sord: '', page: '', rows: '' }

To send categoryId and productName parameter always as the actual values of $('#<%=hdnCategoryId.ClientID %>') and $('#tags').val() you can defines categoryId and productName properties of postData as methods :

postData: {
    categoryId: function() { return $('#<%=hdnCategoryId.ClientID %>').val(); },
    productName: function() { return $('#tags').val(); }
}

See the answer for details. You use already the code of serializeGridData which I suggested in the answer . So the serialization of data will work correctly.