how to remember jqrid advanced search dialog size and position in local storage

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 ?

enter image description here

This occurs if `recreateFilter: true` is used in search parameters. Search form is re-created every time with default width and positions — Andrus, Dec 01 '12 at 19:20

score 1 · Accepted Answer · edited May 23 '17 at 11:43

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.

Thank you. I extended it to rember position also but dialog is created if different position, not in last positon. How to remember position also? I updated question. — Andrus, Dec 02 '12 at 13:30
@Andrus: You are welcome! The updated demo is [here](http://www.ok-soft-gmbh.com/jqGrid/SaveDialogWidthWithPosition.htm) — Oleg, Dec 02 '12 at 13:41
thank you very much. In your demo dialog header can moved outside of client area and after that it is no more accessible. How to fix this? I updated question and added picture. Can we use same method to remember edit, add and view form sizes and dimensions also and use $.extend to add those to other properties in navGrid call ? — Andrus, Dec 02 '12 at 16:29
@Andrus: I don't know how to reproduce the problem, but I suppose that in the picture which you posted the value of `top` is negative. Probably you just need to add validation of saved value and be sure that you set positive `top` and `left` values. The answer on your next question: I think that one can save `width`, `top`, `left`, `height` and `dataheight` for any other dialog (Add/Edit/Delete etc) in the same way like I described for Searching dialog in my answer. — Oleg, Dec 02 '12 at 18:30
To reproduce, drag search dialog by mouse outside bottom of IE client area and release mouse button. How to restrict such dragging? In chrome search dialog is restored inside screen but in IE9 it is restored outside. It would best to not allow such drag like in regular Windows window. — Andrus, Dec 02 '12 at 19:43
If `dataheight` is saved/restored, how to change it using mouse? — Andrus, Dec 02 '12 at 19:45
I posted related question in http://stackoverflow.com/questions/13673340/how-to-set-edit-form-position-and-size-in-jqgrid-combining-with-other-properties — Andrus, Dec 02 '12 at 20:16
@Andrus: In [the answer](http://stackoverflow.com/a/13674600/315935) on your last question you will find my suggestion how to fix the problem with saving negative `top` or `left` options. — Oleg, Dec 03 '12 at 08:29

how to remember jqrid advanced search dialog size and position in local storage

1 Answers1