JqGrid, how to center delete box?

Question

in My Jqgrid i have a column with delete links, everything works perfect, except that delete confirmation box pops up at top left corner all the time. i want to have the confirmation box in center of the jqgrid, not in top left corner.

{ name: 'act', index: 'act', width: 150, align: 'center', sortable: false}],

          gridComplete: function () {

              var rows = jQuery("#list").jqGrid('getGridParam','selrow');
              var ids = jQuery("#list").jqGrid('getDataIDs');
              var gr = jQuery('#list'); gr.setGridHeight("auto", true);
              for (var i = 0; i < ids.length; i++) {
                  var cl = ids[i];
                  be = "<a href='#' style='height:25px;width:120px;' type='button' value='Slet' onclick=\"jQuery('#list').jqGrid('delGridRow','" + cl + "',{reloadAfterSubmit:false, url:'@Url.Action("deleteRow")'}); return false;\">Slet </>";
                  jQuery("#list").jqGrid('setRowData', ids[i], { act: be });   
              }
          },

UPDATE

be = "<a href='#' style='height:25px;width:120px;' type='button' value='Slet' onclick=\"jQuery('#list').jqGrid('delGridRow','" + cl + "', myDelParameters); return false;\">Slet </>";

code for my Global variable:

myDelParameters = {reloadAfterSubmit:false, url:'@Url.Action("deleteRow")',  beforeShowForm: function(form) {
              // "editmodlist"
      var dlgDiv = jQuery("#list").jqGrid("#delmodlist" + 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";
          }};

Answer 1

You set already some parameters of the delGridRow method (see {reloadAfterSubmit:false, url:... in your code).

My suggestion that you use afterShowForm in the list of delGridRow parameters. The implementation of the afterShowForm could be like in the old answer, but with the usage of "#delmodlist" ("#delmod" + grid[0].id, where var grid = $("#list")) instead of $("#editmod" + grid[0].id).

Another more short form of the implementation could be with respect of jQuery UI Position:

afterShowForm = function ($form) {
    $form.closest('div.ui-jqdialog').position({
        my: "center",
        of: $("#list").closest('div.ui-jqgrid')
    });
}

In the demo I use such function for all Add/Edit and Delete forms.

UPDATED: It seems to me that you have implementation problems. I made one more demo which you can easy modify to what you want. I don't set any editurl, so if you press "Delete" button the error will be displayed. Moreover the HTML fragment which you try to place in the 'act' column is a combination of <a> and <button> settings. Because I don't know what you wanted I placed just <a> in the 'act' column. I hope now you can easy modify my demo to make your program working.

Here is the schema of the code from my demo which you can use:

<script type="text/javascript">
//<![CDATA[
    var myDelParameters = {
        reloadAfterSubmit: false,
        //url:'@Url.Action("deleteRow")',
        afterShowForm: function ($form) {
            'use strict';
            $form.closest('div.ui-jqdialog').position({
                my: "center",
                of: $("#list").closest('div.ui-jqgrid')
            });
        }
    };
    $(document).ready(function () {
        var grid = $("#list"),
            centerForm = function ($form) {
                $form.closest('div.ui-jqdialog').position({
                    my: "center",
                    of: grid.closest('div.ui-jqgrid')
                });
            },
            getColumnIndexByName = function (mygrid, columnName) {
                var cm = mygrid.jqGrid('getGridParam', 'colModel'), i = 0, l = cm.length;
                for (; i < l; i += 1) {
                    if (cm[i].name === columnName) {
                        return i; // return the index
                    }
                }
                return -1;
            };

        grid.jqGrid({
            colModel: [
                ...
                {name: 'action', index: 'action', width: 70, align: 'center', sortable: false},
                ...
            ],
            ...
            loadComplete: function () {
                var iCol = getColumnIndexByName($(this), 'action'), iRow, row,
                    rows = this.rows,
                    cRows = rows.length;

                for (iRow = 0; iRow < cRows; iRow += 1) {
                    row = rows[iRow];
                    if ($.inArray('jqgrow', row.className.split(' ')) > 0) {
                        $(row.cells[iCol]).html("<a href='#' style='height:25px;width:120px;' onclick=\"jQuery('#list').jqGrid('delGridRow','" +
                            row.id + "',myDelParameters); return false;\">Del</>");
                    }
                }
            });
    });
//]]>
</script>

Answer 2

for centering the jqdialog and display near the row selected
.ui-jqdialog{position:fixed; left:415px;} This is working perfect for my requirement. Thank You