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
            }
        }
    };
}