2

So I found some good fixes for centering the confirm delete, edit, view etc dialog boxes here. However, when no rows are selected on the grid, a different dialog will appear that shows a simple "Warning: Please, select row." Besides this dialog having horrible grammar, I can't seem to find anyway of handling this dialog's events so that I can reposition as desired.

I added handlers for every event in the navGrid I could find and used BugZilla to see if it would stop on any of these events to no avail. When rows are selected, it will fire the delete event fine. Ideas? Below is my code:

$('#sessionGrid').jqGrid({...}).navGrid('#sessionPager', { 
            add: false,
            edit: false,
            del: true,
            search: false,
            closeOnEscape: true
        }, {
            afterShowForm: function (form) {
                form.closest('div.ui-jqdialog').center();
            }
        }, {
            afterShowForm: function (form) {
                form.closest('div.ui-jqdialog').center();
            }
        }, {
            caption: "Delete",
            msg: "Delete the selected sessions?",
            bSubmit: "Delete",
            bCancel: "Cancel",
            afterShowForm: function (form) {
                form.closest('div.ui-jqdialog').center();
            }
        }, {
            afterShowForm: function (form) {
                form.closest('div.ui-jqdialog').center();
            }
        }, {
            afterShowForm: function (form) {
                form.closest('div.ui-jqdialog').center();
            }
        });
Community
  • 1
  • 1
Britton
  • 183
  • 2
  • 10

1 Answers1

0

The following code in grid.formedit.js is used to display this dialog:

if (o.del) {
    tbd = $("<td class='ui-pg-button ui-corner-all'></td>");
    pDel = pDel || {};
    $(tbd).append("<div class='ui-pg-div'><span class='ui-icon "+o.delicon+"'></span>"+o.deltext+"</div>");
    $("tr",navtbl).append(tbd);
    $(tbd,navtbl)
    .attr({"title":o.deltitle || "",id: pDel.id || "del_"+elemids})
    .click(function(){
        if (!$(this).hasClass('ui-state-disabled')) {
            var dr;
            if($t.p.multiselect) {
                dr = $t.p.selarrrow;
                if(dr.length===0) {dr = null;}
            } else {
                dr = $t.p.selrow;
            }
            if(dr){
                if($.isFunction( o.delfunc )){
                    o.delfunc.call($t, dr);
                }else{
                    $($t).jqGrid("delGridRow",dr,pDel);
                }
            } else  {
// !!! The actual dialog is displayed here  -
                $.jgrid.viewModal("#"+alertIDs.themodal,{gbox:"#gbox_"+$.jgrid.jqID($t.p.id),jqm:true});$("#jqg_alrt").focus();
            }
        }
        return false;
    }).hover(
        function () {
            if (!$(this).hasClass('ui-state-disabled')) {
                $(this).addClass("ui-state-hover");
            }
        },
        function () {$(this).removeClass("ui-state-hover");}
    );
    tbd = null;
}

Unfortunately jqGrid does not expose an event for this. But you might have luck binding your own function to the delete button's click event. In the same file you can see how the DOM ID is assigned to the delete button:

.attr({"title":o.deltitle || "",id: pDel.id || "del_"+elemids})

In essence, you can either pass the id parameter as part of the delete parameters, or if you do not it will default to elemids which is assigned the DOM ID of your grid (EG: your selector would be '#del_mygrid').

Anyway, then you can use something like jQuery('div.ui-jqdialog').center(); in your click event handler to reposition the dialog as needed.

Does that help?

As an aside, the actual dialog text is in grid.locale-en.js -

alerttext: "Please, select row",

I agree this is horrible :) The good news is that this is a separate js file, so you can revise it as necessary.

Justin Ethier
  • 131,333
  • 52
  • 229
  • 284