how to center jqGrid popup modal window? [duplicate]

Question

Possible Duplicate:
jqGrid Reposition Delete Confirmation Box

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

Spindle

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.

Immobility

thanks dude that was cool! just for anyone who is in the same situation as me.Please note that the name of the edit modal popup is "editmod" + name_of_your_grid". you can verify it with firebug in firefox or any firefox based browser – Spindle

@black sensei: Good advice! I forget to mention this. To make everithing clear I changed the code a litle. – Immobility

@Oleg: answers here do not work if window height increases. Vertical centering works only for first record. If next record button is pressed, window height may increase because textarea contaisn more rows. Form is not centered and bottom part moves out of screen. Centering code should run for every record, not only for first one. How to fix this ? – Coronel

@Andrus: It work good, but with grids which are not large. I wrote you before that you should make some changes to make good results in your case. In the demo above the dlgDiv.parent() ("div#gbox_list") was used and the hight with width if the parent was used for centering. In your case you can use innerWidth and innerHeight of window, $(window).height() or something like that. – Immobility

Code centers OK window for firts time. The issue seems that this code runs only once. It should re-run every time if window height changes (if new navigated record height is different) – Coronel

@Andrus: Sorry, but I can't follow you. You can open edit form in my demo and move the form on another place on the window. Then you can close the fore and open it one more time. You will see the form in the middle of the grid. You wrote about "...window height changes..." I wrote you already before that the code center the form in the middle of it's parent (in the middle of the grid) and not in the middle of the window like you as want, so you should change the code to have another behavior. You can also use another approach which I referenced you before: jQuery UI Position. – Immobility

@Oleg: I added new answer containing steps to reproduce – Coronel

Answer 2

For some reason Oleg's code, as listed, wasn't completely working for me (though I wouldn't have ever gotten this far without it).

Two issues:

1.) If you just paste in what's in that answer, you'll move your edit modal, but not your add modal. I only have an add modal, so that was confusing for a while. You basically just double the code (see below).

2.) The code Oleg's written was adding the averaged top and left relative to the entire page rather than the parent div. I'm sure I'm missing something obvious (or perhaps that's what the TODO is about?), but this worked for me...

Note: I edited to factor the function out to reuse in add and edit modals and haven't actually tested the changes. If this doesn't work, see the previous revision.

var grid = $("#list");    

function centerDialog(form)  {
  //alert('adding' + "#editmod" + grdNames[0].id);
  var dlgDiv = $("#editmod" + grdNames[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();

  // Grabbed jQuery for grabbing offsets from here:
  //https://mcmap.net/q/430442/-select-text-and-then-calculate-its-distance-from-top-with-javascript
  var parentTop = parentDiv.offset().top;
  var parentLeft = parentDiv.offset().left;


  // HINT: change parentWidth and parentHeight in case of the grid
  //       is larger as the browser window
  dlgDiv[0].style.top  = Math.round( 
    parentTop  + (parentHeight-dlgHeight)/2  
  ) + "px";

  dlgDiv[0].style.left = Math.round( 
    parentLeft + (parentWidth-dlgWidth  )/2 
  )  + "px";
}

// Now it's easy to reuse that function to center stuff.
grid.jqGrid(
  'navGrid','#pager',
  {add:false,del:false,search:false,refresh:false},
  { beforeShowForm: centerDialog }, // edit modal
  { beforeShowForm: centerDialog }  // add modal
);

Monocle

Answer 3

Code below can used to center window. Oleg sample code is used for that.

If form height changes, it does not center. Testcase to reproduce form not centered issue.

Steps to reproduce:

1. Open page below in IE9
2. Open view for first row
3. click in view window next row button to open second row.

Observerd:

view window is not centered, bottom content is not visible and not accessible.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/jquery.searchFilter.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/ui.multiselect.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/ui.multiselect.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.base.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.common.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.formedit.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.inlinedit.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.custom.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/jquery.fmatter.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/jquery.searchFilter.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.jqueryui.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

        jQuery.extend(jQuery.jgrid.view, {
           recreateForm: true,
           closeOnEscape: true,

            width: 0.96*screen.width,

           beforeShowForm: function ($form) {
             $form.css({"max-height": 0.72*screen.height+"px"});
             $form.find("td.DataTD").each(function () {
               var $this = $(this), html = $this.html();  // &nbsp;<span>&nbsp;</span>
               if (html.substr(0, 6) === "&nbsp;") {
                 $(this).html(html.substr(6));
                 }
                $this.children("span").css({
                                overflow: "auto",
                                "text-align": "inherit", // overwrite 'text-align: "right"'
                                display: "inline-block"/*,
                                "max-height": "100px"*/
                            });
                        });

                        // "editmodlist" 
                  var dlgDiv = $("#viewmod" + $('#list')[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"; 



                    }


         });

            var mydata = [
                {id:"1",invdate:"2007-10-02",name:"row1",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"2",invdate:"2007-10-02",name:"clicking\n me\n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nincreases form height clicking me increases form height test2 sdfsdfsd dfksdfkj sdfjksdfjk sdsdl sdklfsdjklf dsflsdl sdlfsdfklj lsdlf sdlsdfklsdjlk sdfsdlfkjsd sflsdfkjsdfs sdfsjdfklsdklfj fsdjflsdfj",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}
            ];
            var grid = $("#list");
            grid.jqGrid({
                data: mydata,
                datatype: "local",
                colModel:[
                    {name:'id',index:'id', key: true, width:70, sorttype:"int"},
                    {name:'invdate',index:'invdate', width:90, sorttype:"date", editable: true},
                    {name:'name',index:'name', style:'width:"20px"', editable: true, edittype: 'textarea',
wrap: 'on',
editoptions: {                  wrap : "on",
                                style : "width:30px"
}
},
                    {name:'amount',index:'amount', width:80, align:"right",sorttype:"float", editable: true},
                    {name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable: true},
                    {name:'total',index:'total', width:80,align:"right",sorttype:"float", editable: true},
                    {name:'note',index:'note', width:150, sortable:false}
                ],
                pager:'#pager',
                rowNum: 10,
                rowList: [5, 10, 20, 50],
                sortname: 'id',
                sortorder: 'asc',
                viewrecords: true,
                height: "100%",
                caption: "Custom Navigation to Top Toolbar"
            });
            grid.jqGrid('navGrid','#pager',{add:false,del:false,search:false,refresh:false, edit: false, view: true});
        });
    </script>
</head>

<body style="overflow:hidden">

<table id="list"><tbody><tr><td/></tr></tbody></table>
<div id="pager"/>

</body>
</html>

Coronel

Answer 4

or just use

beforeShowForm: function(form) {$("#editmod" + gridId).addClass("centered"); }

where gridId is your grid's ID, and then in css something like this:

div.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;

}

cheers Jarek

Paintbrush

This solution only works if the div to center is 100px height and 200px width. – Illogicality