JQGrid position of the AlertMod warning message

Question

I have a number of jqgrids in my page. The popup alert modal window ("Warning Please select a row") is always displayed at the top. I wanted the modal window to appear alongside the JQGrid from which the edit event is generated. The only way I could get this to work was to change the JQGrid source code to the following.

//Line number 7866
if (o.edit) {
    tbd = $("<td class='ui-pg-button ui-corner-all'></td>");
    pEdit = pEdit || {};
    $(tbd).append("<div class='ui-pg-div'><span class='ui-icon "+o.editicon+"'></span>"+o.edittext+"</div>");
    $("tr",navtbl).append(tbd);
    $(tbd,navtbl)
    .attr({"title":o.edittitle || "",id: pEdit.id || "edit_"+elemids})
    .click(function(){
        if (!$(this).hasClass('ui-state-disabled')) {
            var sr = $t.p.selrow;
            if (sr) {
                if($.isFunction( o.editfunc ) ) {
                    o.editfunc(sr);
                } else {
                    $($t).jqGrid("editGridRow",sr,pEdit);
                }
            } else {
                $.jgrid.viewModal("#"+alertIDs.themodal,{gbox:"#gbox_"+$t.p.id,jqm:true});

                //***********
                //Added this to change the location of the Warning Alert window
                //Line number 7883
                $("#alertmod")[0].style.top =$("#gbox_"+$t.p.id)[0].offsetTop; 
                //***********

                $("#jqg_alrt").focus();
            }
        }
        return false;

Is there an easier way to achieve this without modifying the src code.

Answer 1

see this answer jqGrid warning please select row position

it can be one alternative for what you want.

var orgViewModal = $.jgrid.viewModal;
$.extend($.jgrid,{
    viewModal: function (selector,o){ 
        if(selector == '#alertmod'){
            var of = jQuery(o.gbox).offset();       
            var w = jQuery(o.gbox).width();       
            var h = jQuery(o.gbox).height(); 
            var w1 = $(selector).width();
            var h1 = $(selector).height();
            $(selector).css({
                'top':of.top+((h-h1)/2),
                'left':of.left+((w-w1)/2)
            });
        }
        orgViewModal.call(this, selector, o);
    }
});