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.)

Hardden

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.

Bin

I have yet to add it to my coding but by the demo it appears to be what i need. Thank you so much! – Hardden

The demo doesn't seem to work anymore. The form still popup to the very top. Am I missing something? – Surround

@Chensformers: Which web browser you used for the test? Try to reproduce your test one more time: 1) open the demo; 2) select a row close to the bottom of the grid so that you can see the navigator bar (for example select the row number 290) 3) click "Delete" button 4) verify that the "Delete" dialog are displayed under the selected row (under the row number 290). If one don't use the afterShowForm from my answer then the Delete dialog will be displayed at the top of the grid instead of under selected row. – Bin

Oleg, you are right! I now see how they are behave differently. Thanks! – Surround

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.

Improve