jqGrid Reposition Delete Confirmation Box

Question

I am currently using jqGrid with the navGrid, del set to true. Problem is when a user clicks on delete, it pops up a confirmation box in the upper left hand of the grid. Since we are already scrolled down to the very bottom, which i have a large height, the user has to go all the way to the top to confirm. Is there any way to move the position of this? A manual offset is just fine, but ideally i want to dock it to the bottom left, as apposed to top left.

Thanks in advance

(If this is a dupe I am sorry. I tried just posting it but it gave me some weird error and is not showing in my history so assumed it did not post.)

Answer 1

I find is not a dupe. On the opposite I find it good so +1 from me.

The jqGrid use internally the method viewModal ($.jgrid.viewModal) which shows the most dialogs. The method has toTop parameter, but and delGridRow and editGridRow dosn't use it and it will be set to toTop:true. So the Add, Edit and Delete dialogs will be displayed always to the top of the grid which can be inside of inviable area.

To fix the problem you can define the afterShowForm event handle which change the dialog position. For example

$("#list").jqGrid('navGrid','#pager', {}, {}, {},
                  {
                      afterShowForm: function($form) {
                          var dialog = $form.closest('div.ui-jqdialog'),
                              selRowId = myGrid.jqGrid('getGridParam', 'selrow'),
                              selRowCoordinates = $('#'+selRowId).offset();
                          dialog.offset(selRowCoordinates);
                      }
                  });

In the example the dialog will be placed over the selected row. The code can be improved for the case when the selected row in the last row and the bottom part of the dialog is outside of the window. Nevertheless the above implementation seems me better as the default one because the user see the dialog exactly over the row which he want to delete and he can move the dialog so that it will be full visible.

You can test the suggested movement of the Delete dialog on the live demo.

Answer 2

Found something better here !

add this in your javascript library :

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}

Now you just need to add this in the afterShowForm property :

afterShowForm: function(form) {
    form.closest('div.ui-jqdialog').center();
}

form.closest('div.ui-jqdialog') => allow you to get the modal popup window, no need to precise if it's an editForm or a deleteForm.

This code place the popup in the center of your screen, so you don't have to scroll if your have a really big grid.