how to set edit form position and size in jqgrid combining with other properties

Question

How to create jqgrid edit form at specified position and size which can changed in runtime? Edit window postition should combined with other edit parameters in navGrid.

I tried code below but alert box does not appear and edit form is shown in default position.

var oldJqDnRstop,
  editWindowParams = { 
          left: 10,
          width: window.innerWidth-18,
          top: 5,
          height: 100
          };

if ($.jqDnR) {
    oldJqDnRstop = $.jqDnR.stop; // save original function
    $.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") {
            return;
        }
        if (dialogId.substr(0, 11) === "editmodgrid") {
            editWindowParams.width = $dialog.width();
            position = $dialog.position();
            editWindowParams.left = position.left;
            editWindowParams.top = position.top;
        }
    };
}


        $.extend($.jgrid.edit, {
          closeAfterAdd: true,
          recreateForm: true,
          reloadAfterSubmit: false,
          left: 10,
          dataheight: '100%',
          width: window.innerWidth-18
        });



     $grid.jqGrid("navGrid", "#grid_toppager", { edit: true }, 
      { 
       top: function() { alert(editWindowParams.top); return editWindowParams.top; },
       left: function() { return editWindowParams.left; },
       width: function() { return editWindowParams.width; },
       height: function() { return editWindowParams.height; },

            afterSubmit: function (response, postdata) { 
              if (response.responseText.charAt(0) === '{') {
                var json = $.parseJSON(response.responseText);
                return [true, '', json.Id];
                }
              alert( decodeErrorMessage(response.responseText, '', ''));
              return [false, decodeErrorMessage(response.responseText, '', ''), null];
              },

            beforeShowForm: function ($form) {
              $("#tr_Info>td:eq(1)").attr("colspan", "2"); 
              $("#tr_Info>td:eq(1)>textarea").css("width", "95%"); 
              $("#tr_Info>td:eq(0)").hide(); 
              $("#tr_Markused>td:eq(1)").attr("colspan", "2"); 
              $("#tr_Markused>td:eq(1)>textarea").css("width", "95%"); 
              $("#tr_Markused>td:eq(0)").hide(); 
              beforeShowForm_base($form);
              },


            url: '/Edit',
            closeAfterEdit: true,
            onClose: function(){ 
              $( ".ui-autocomplete-input").trigger("blur");
            } 

       } );

Answer 1

The demo demonstrate the fixed code. It's modification of the demo from my previous answer . It uses the following code:

if ($.jqDnR) {
    oldJqDnRstop = $.jqDnR.stop; // save original function
    $.jqDnR.stop = function (e) {
        var $dialog = $(e.target).parent(), dialogId = $dialog.attr("id"),
            position, $form;

        oldJqDnRstop.call(this, e); // call original function
        if (typeof dialogId === "string") {
            if (dialogId.substr(0,14) === "searchmodfbox_") {
                // save the dialog position here
                searchParams.width = $dialog.width();
                position = $dialog.position();
                searchParams.left = Math.max(0, position.left);
                searchParams.top = Math.max(0, position.top);
            } else if (dialogId.substr(0,7) === "editmod") {
                // Add or Edit form
                editParams.width = $dialog.width();
                position = $dialog.position();
                editParams.left = Math.max(0, position.left);
                editParams.top = Math.max(0, position.top);
                $form = $dialog.find("form.FormGrid");
                if ($form.length > 0) {
                    editParams.dataheight = $form.height();
                }
                editParams.height = $dialog.height();
            } else if (dialogId.substr(0,6) === "delmod") {
                // Delete form
            }
        }
    };
}