What is the best way to persist the postdata for jqGrid?

Question

I have used jQGrid in a asp.net mvc2 project for populating user details. In the pager section of the jQGrid, I have a Search and Refresh button. On click of Search button a popup opens which contains few textbox controls. Now user enters data in the text boxes based on which the search operation is performed.Once the search is completed the Search popup gets closed and then the data gets populated in the jQGrid.

Now let say based on the above search criteria there are 40 records populated in the jQGrid and each page contains 10 records. So now we have 4 pages in total. Now when I navigate to the 2nd page I see that the total records and the total pages count is not maintained based on the search criteria. On analysis I found that postdata is not maintained across the search operation.

I am using the following code :

users.js:

function usersInit(getAllUsers,page,sord,rows) {
    $('#users-list').jqGrid(
        {
            url: getAllUsers + "?random=" + Math.random(),
            datatype: 'json',
            mtype: 'GET',
            postData:
            {
                filters: function () {
                    return $.toJSON([
                                    { Key: "FirstName", Value: $.trim($("[name='txtFirstName']").val()) },
                                    { Key: "LastName", Value: $.trim($("[name='txtLastName']").val()) },
                                    { Key: "Login", Value: $.trim($("[name='txtLogin']").val()) },
                                    { Key: "Organization", Value: $.trim($("[name='txtOrganization']").val()) }
                                    ]);
                }
            },
            colNames: ['UserID', 'Login', 'IsRootUser', 'CreationDate', 'IsActive', 'FirstName', 'LastName', 'Organization', 'UserType', 'EmailAddress'],
            colModel: [
                            { name: 'UserID', index: 'UserID', hidden: true },
                            { name: 'Login', index: 'Login', width: 150 },
                            { name: 'IsRootUser', index: 'IsRootUser', search: false, width: 100, align: 'center' },
                            { name: 'CreationDate', index: 'CreationDate', search: false, width: 100, align: 'left' },
                            { name: 'IsActive', index: 'IsActive', search: false, width: 100, align: 'center' },
                            { name: 'FirstName', index: 'FirstName', search: false, width: 150, align: 'center' },
                            { name: 'LastName', index: 'LastName', search: false, width: 150, align: 'center' },
                            { name: 'Organization', index: 'Organization', search: false, width: 100, align: 'center' },
                            { name: 'UserType', index: 'UserType', search: false, width: 100, align: 'center' },
                            { name: 'EmailAddress', index: 'EmailAddress', search: false, width: 140, align: 'center' }
                      ],
            autowidth: false,
            sortname: 'Login',
            //sortorder: 'asc',
            sortorder: sord,
            rowNum:rows,
            page:page,
            width: "1100",
            height: "auto",
            viewrecords: true,
            pager: '#users-list-pager',
            loadui: 'block',
            loadError: function (xhr, status) {
                location.reload();
            }
        });

    $('#users-list').jqGrid('navGrid', '#users-list-pager', { add: false, del: false, search: false, view: false, edit: false, refresh: false })
    // Search Details 
        .navButtonAdd("#users-list-pager", {
            id: "btn-search-user",
            caption: "Search User",
            buttonicon: "ui-icon-search",
            onClickButton: function () {
                SearchUserDialog()
            .dialog('option', 'title', 'Search User')
            .dialog('open');
            }
        });

    // Refresh Details
    $("#users-list").jqGrid('navButtonAdd', "#users-list-pager", {
        caption: "Refresh", title: "Reload Grid", buttonicon: "ui-icon-refresh",
        onClickButton: function () {
            $('#users-list').jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
        }
    });

    // Search dialog
    var SearchUserDialog = function () {
        return $("#user-search-dialog").dialog({
            resizable: false,
            autoOpen: false,
            modal: true,
            height: 235,
            width: 480,
            buttons: {
                "Cancel": function () {
                    $(this).dialog('close');
                },
                "Search": function () {
                    // Get all the user details
                    var firstName = $.trim($("[name='txtFirstName']").val());
                    var lastName = $.trim($("[name='txtLastName']").val());
                    var loginName = $.trim($("[name='txtLogin']").val());
                    var organization = $.trim($("[name='txtOrganization']").val());

                    if (ValidateUserDetails(firstName, lastName, loginName, organization)) {
                        $("#users-list").trigger("reloadGrid");
                        $(this).dialog('close');
                    }
                }
            },
            close: function () {
                $('#user-search-dialog-form').each(function () {
                    this.reset();
                });
            },
            open: function () {
                $("[name='txtFirstName']").focus();
            }
        });
    }
}
function ValidateUserDetails(firstName, lastName, loginName, organization) {
    var isValidSearch = true;
    var errorMessage = '';

    if ((firstName.length === 0) && (lastName.length === 0) && (loginName.length === 0) && (organization.length === 0)) {
        //$("<div title='Alert'>" + " Please enter value for at least one of the input parameters.\n" + errorMessage + "</div>").dialog();
        alert('Please enter values for at least one of the input parameters :<br/> <ul><li>First Name</li><li>Last Name</li><li>Login</li><li>Organization</li></ul>');
        isValidSearch = false;
    }
    return isValidSearch;
}

Can anyone help me to know the best possible solution to maintain the postdata during open and closing events of the Search popup box?

Thanks & Regards, Santosh Kumar Patro

Answer 1

I analysed the issue and found that the value of text boxes are not persisting due to the following code :

close: function () {
                $('#user-search-dialog-form').each(function () {
                    this.reset();
                });
            },

which in turn is resetting the postData values and causing issue in maintaining the paging.

Thanks & Regards, Santosh Kumar Patro