how to center jqGrid popup modal window?

Question

Hello!

I've started using jqGrid for few days and everything is working cool.so far so good. What borders me is that when you click on edit button in the NavGrid without selecting a row, it shows a centered modal popup notifying of no row being selected. But when you click on add or edit(with selected row) it shows a modal at the left side of the grid.Not centered at all.

I'll like to find a way to center it.

How is that done? or it can not be done out of the box?

thanks for reading this

Answer 1

It seems to me, that the easiest way to do this is to change the dialog position inside of the beforeShowForm event:

var grid = $("#list");    
grid.jqGrid('navGrid','#pager',
            {add:false,del:false,search:false,refresh:false},
            { beforeShowForm: function(form) {
                  // "editmodlist"
                  var dlgDiv = $("#editmod" + grid[0].id);
                  var parentDiv = dlgDiv.parent(); // div#gbox_list
                  var dlgWidth = dlgDiv.width();
                  var parentWidth = parentDiv.width();
                  var dlgHeight = dlgDiv.height();
                  var parentHeight = parentDiv.height();
                  // TODO: change parentWidth and parentHeight in case of the grid
                  //       is larger as the browser window
                  dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
                  dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
              }
            });

You can see live the example here.