Question

jqgrid advanced search dialog window size and position can changed by mouse.

Those changes are not remembered.
It is is opened next time, default size and position is shown.

How to save and restore it, probably using local storage.
Before resoring also check shoud be made that part of search dialog is visible if screen resolution or size has changed.

Update

I tried to extend Oleg answer to save / restore window position also using code below.
Search windows is restored to different positon than it was initially. It looks like left and top values retireved using code below are wrong. How to restore position also ?

var oldJqDnRstop, searchParams = { width: 550, left: 5, top: 5 };
if ($.jqDnR) {
    oldJqDnRstop = $.jqDnR.stop; // save original function
    $.jqDnR.stop = function (e) {
        var $dialog = $(e.target).parent(), dialogId = $dialog.attr("id");
        oldJqDnRstop.call(this, e); // call original function
        if (typeof dialogId === "string" && dialogId.substr(0, 14) === "searchmodfbox_") {
            // save the dialog position here
            // we save "width" option as the property of searchParams object
            // used as parameter of navGrid
            searchParams.width = $dialog.width();
            searchParams.left  = $dialog.offset().left;
            searchParams.top  = $dialog.offset().top;
            saveWindowState();
        }
    };
}

Update2

In Oleg demo, dialog header can moved outside of browser window. After that dialog is no more moveable. How to fix this ?

Answer 1

I find your question interesting. So below you will find an possible implementation.

One can divide your question in two parts: 1) saving of the width of the Searching Dialog during multiple opening in case of usage recreateFilter: true 2) saving the width inside of localStorage.

The second part is relatively easy if you use localStorage already. You need just extend the saved state with one additional parameter. The exact implementation depend a little from the way how saving in localStorage are implemented. In the answer I shown how one can use getItem and setItem methods of window.localStorage to implement saving in localStorage. Alternatively one could use jStorage which is very practical if you need support old web browsers like IE6/IE7 additionally.

So I explain below just how the width of the Searching Dialog can be saved during multiple opening in case of usage recreateFilter: true.

I suggest to “subclass” the method $.jqDnR.stop because there are no callback which will be used at the end of dialog re-sizing. The corresponding code could be like below

var oldJqDnRstop, searchParams = { width: 450 };

if ($.jqDnR) {
    oldJqDnRstop = $.jqDnR.stop; // save original function
    $.jqDnR.stop = function (e) {
        var $dialog = $(e.target).parent(), dialogId = $dialog.attr("id");
        oldJqDnRstop.call(this, e); // call original function
        if (typeof dialogId === "string" && dialogId.substr(0,14) === "searchmodfbox_") {
            // save the dialog position here
            // we save "width" option as the property of searchParams object
            // used as parameter of navGrid
            searchParams.width = $dialog.width();
        }
    };
}

// create the grid
$grid.jqGrid({
    ....
});

// create navigator with "Search" button where searchParams object
// will be used as parameter
$grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false},
    {}, {}, {}, searchParams);

You can see the corresponding demo here.

UPDATED: To save position of the searching dialog together with the width one need to extend the code of new implementation of $.jqDnR.stop to the following

$.jqDnR.stop = function (e) {
    var $dialog = $(e.target).parent(), dialogId = $dialog.attr("id"), position;
    oldJqDnRstop.call(this, e); // call original function
    if (typeof dialogId === "string" && dialogId.substr(0,14) === "searchmodfbox_") {
        // save the dialog position here
        searchParams.width = $dialog.width();
        position = $dialog.position();
        searchParams.left = position.left;
        searchParams.top = position.top;
    }
};

In the above code the left and the top option will be additionally saved. The modified demo is here.