Why JQuery Modal Dialog and JQGrid Modal Dialog are looking different?

Question

I have created JQGrid with Jquery modal dialog for Delete. Jqgrid with inline editing and one field is required if i leave it blank and the press submit the it will popup message Please enter First Name but the problem is Inbuilt Popup message and my jquery modal dialog are looking too different.

Inbuilt JQGrid Modal Dialog:

JQuery Modal Dialog

CODE:

function createGrid() {
        jQuery("#list").jqGrid({
            url: '@Url.Action("JQGridGetGridData", "TabMaster")',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['col ID', 'First Name', 'Last Name', ''],
            colModel: [{ name: 'colID', index: 'colID', width: 100, align: 'left', searchoptions: { sopt: ['eq', 'ne', 'cn']} },
                      { name: 'FirstName', index: 'FirstName', width: 150, align: 'left', editable: true, editrules: { required: true} },
                      { name: 'LastName', index: 'LastName', width: 150, align: 'left', editable: true, editrules: { required: true} },
                      { name: 'act', index: 'act', width: 60, sortable: false}],
            pager: jQuery('#pager'),
            hidegrid: false,
            rowNum: 100,
            rowList: [10, 50, 100, 150],
            sortname: 'colID',
            sortorder: "asc",
            viewrecords: true,
            multiselect: false,
            width: 500,
            height: "250px",
            imgpath: '@Url.Content("~/Scripts/themes/steel/images")',
            caption: 'Tab Master Information',
            editurl: '@Url.Action("JQGridEdit", "TabMaster")',
            gridComplete: function () {
                var ids = jQuery("#list").getDataIDs();
                for (var i = 0; i < ids.length; i++) {
                    var id = ids[i];
                    be = "<a href='#'><div title='Edit' id='action_edit_" + id + "' class='actionEdit' onclick='inlineEdit(" + id + ");'></div></a>";
                    de = "<a href='#'><div title='Delete' id='action_delete_" + id + "' class='actionDelete' onclick='inlineDelete(" + id + ");'></div></a>";
                    se = "<a href='#'><div title='Save' style='display:none' id='action_save_" + id + "' class='actionSave' onclick='inlineSave(" + id + ");'></div></a>";
                    ce = "<a href='#'><div title='Cancel' style='display:none' id='action_cancel_" + id + "' class='actionCancel' onclick='inlineCancel(" + id + ");'></div></a>";
                    jQuery("#list").setRowData(ids[i], { act: be + de + se + ce })
                }
            }
        }).navGrid('#pager', { edit: false, add: false, del: false, search: false, refresh: false });
    }

How can i apply Jquery Modal Dialog for JQGrid inbuilt dialog skin?

Thanks, Imdadhusen

Answer 1

jqGrid is jQuery plugin and not a jQuery UI widget. So it use not jQuery UI dialog. Instead of that it uses $.jgrid.createModal, $.jgrid.viewModal and $.jgrid.hideModal method. In some situation simplified version $.jgrid.info_dialog are used. Many people (inclusive me) wish that jqGrid in one of the next version will do use more jQuery UI controls internally and probably will be a jQuery UI widget, but now if you want to create dialog in jqGrid style you should use the methods which I listed above.

As an example of usage of the functions I suggest the following example which create the same dialog as jqGrid do with delGridRow method. I included in the demo the "Delete" navigation button to show, that if you first use "Delete selected row" button which create dialog and then use "Delete" navigation button no new dialog will be created by jqGrid. Instead of that our custom dialog will be used.

The corresponding code is below:

var grid = $("#list"),
    gID = grid[0].id, //grid[0].p.id,
    IDs = {
        themodal:'delmod'+gID,
        modalhead:'delhd'+gID,
        modalcontent:'delcnt'+gID,
        scrollelm:'DelTbl_'+gID
    },
    hideDialog = function() {
        $.jgrid.hideModal("#"+IDs.themodal,{gb:"#gbox_"+gID,jqm:true, onClose: null});
    },
    rowId,
    createDeleteDialog = function() {
        var dlgContent =
            "<div id='"+IDs.scrollelm+"' class='formdata' style='width: 100%; overflow: auto; position: relative; height: auto;'>"+
                "<table class='DelTable'>"+
                    "<tbody>"+
                        "<tr id='DelError' style='display: none'>"+
                            "<td class='ui-state-error'></td>"+
                        "</tr>"+
                        "<tr id='DelData' style='display: none'>"+
                            "<td>"+rowId+"</td>"+ // it has not so much sense
                        "</tr>"+
                        "<tr>"+
                            "<td class='delmsg' style='white-space: pre;'>"+$.jgrid.del.msg+"</td>"+
                        "</tr>"+
                        "<tr>"+
                            "<td>&#160;</td>"+
                        "</tr>"+
                    "</tbody>"+
                "</table>"+
            "</div>"+
            "<table cellspacing='0' cellpadding='0' border='0' class='EditTable' id='"+IDs.scrollelm+"_2'>"+
                "<tbody>"+
                    "<tr>"+
                        "<td>"+
                            "<hr class='ui-widget-content' style='margin: 1px' />"+
                        "</td>"+
                    "</tr>"+
                    "<tr>"+
                        "<td class='DelButton EditButton'>"+
                            "<a href='javascript:void(0)' id='dData' class='fm-button ui-state-default ui-corner-all'>Delete</a>"+
                            "&#160;<a href='javascript:void(0)' id='eData' class='fm-button ui-state-default ui-corner-all'>Cancel</a>"+
                        "</td>"+
                    "</tr>"+
                "</tbody>"+
            "</table>";

        if ($('#'+IDs.themodal).length===0) {
            // dialog not yet exist. we need create it.
            $.jgrid.createModal(
                IDs,
                dlgContent,
                {
                    gbox: "#gbox_"+gID,
                    caption: $.jgrid.del.caption,
                    jqModal: true,
                    left: 12,
                    top: 44,
                    overlay: 10,
                    width: 240,
                    height: 'auto',
                    zIndex: 950,
                    drag: true,
                    resize: true,
                    closeOnEscape: true,
                    onClose: null
                },
                "#gview_"+gID,
                $("#gview_"+gID)[0]);
            $("#dData","#"+IDs.scrollelm+"_2").click(function(){
                // "Delete" button is clicked
                var rowId = grid.jqGrid('getGridParam', 'selrow');
                grid.jqGrid('delRowData',rowId);
                //$.jgrid.hideModal("#"+IDs.themodal,{gb:"#gbox_"+gID,jqm:true, onClose: null});
                hideDialog();
            });
            $("#eData", "#"+IDs.scrollelm+"_2").click(function(){
                // "Cancel" button is clicked
                //$.jgrid.hideModal("#"+IDs.themodal,{gb:"#gbox_"+gID,jqm:true, onClose: null});
                hideDialog();
                //return false;
            });
        }

        $.jgrid.viewModal("#"+IDs.themodal,{gbox:"#gbox_"+gID,jqm:true, overlay: 10, modal:false});
    };

grid.jqGrid({/*jqGrid options*/});

$("#delgridrow").click(function() {
    rowId = grid.jqGrid('getGridParam', 'selrow');
    if (rowId === null) {
        $.jgrid.viewModal("#alertmod",{gbox:"#gbox_"+grid[0].p.id,jqm:true});
        $("#jqg_alrt").focus();
    } else {
        createDeleteDialog();
    }

    return false;
});

Answer 2

I too found the built-in jqGrid modal dialog difficult to implement. Trying to call the createModal(), with all of its parameters, was way too complicated. The workarounds I saw posted were also very complex. I decided to do an end-run around the problem by rewriting the HTML and then displaying it.

jqGrid already writes the HTML for their modal popup at load. I hijacked it, wrote my own listener for the 'X' close link and, lo and behold, I had myself a fully skinned dialog box. Mine isn't modal, but you could easily create your own by modifying the CSS of the solution. Once you understand how to manipulate the HTML you can add whatever elements/attributes/classes you want. Upon close you just remove what you've added.

var popup = function (msg, title) {
  if ($('#clonePopup').length == 0) {
    var popupClose = $('.ui-icon-closethick');
    popupClose.clone().attr('id', 'clonePopup').insertAfter(popupClose);
    popupClose.hide();
    $('#alertcnt>div').html(msg);
    $('#alerthd>span').html(title);
    $('#clonePopup').click(function (e) {
        $('#alertmod').hide();
        $('#clonePopup').remove();
        $('#alertcnt>div').html(' אנא, בחר שורה');
        $('#alerthd>span').html('אזהרה');
        popupClose.removeAttr('style');
    });
    $('#alertmod').show();
  }  
}};

popup('Row saved successfully','Success');

First, I test whether the messagebox is already displayed by checking if my #clonePopup id already exists. I then grab a handle on the X close link because I'm going to clone it and hide the original. If I use the original it won't work, because jqGrid is listening for it and I haven't set the necessary parameters. I create a clone and give it an ID of 'clonePopup'. I then hide the original.

$('#alertcnt>div') gets me the container for the title.
$('#alerthd>span') gets me the container for the message.
$('#alertmod') is then shown.

$('#clonePopup').click()  then resets the HTML to its original state to not interfere with jqGrid's normal operation. 

It may not be a perfect solution but may be for some. Works for me. Saves me from trying to figure out how createModal() works!

The main point of this post is not whether this particular solution works for you as is (hopefully it does), but that you can override the limitations of jqGrid by rewriting their HTML.

Answer 3

Update to my previous post...

I added a modal interface in the end which removed the need to check for my #clonePopoup. I clean up the modal at the end as well. I use a , found after the #alertmod in Chrome, to create the modal. However, in IE, for some reason, this same doesn't appear. I create it if it doesn't already exist.

Hopefully, this is a more complete solution.

var popup = function (msg, title) {
    var modalcss = { position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', display: 'block', opacity: 0.4, filter: 'alpha(opacity=40)', 'background-color': '#000', 'text-align': 'center', 'z-index': 101 };
    var popupClose = $('.ui-icon-closethick');
    popupClose.clone().attr('id', 'clonePopup').insertAfter(popupClose);
    popupClose.hide();
  $('#alertcnt>div').html(msg);
    $('#alerthd>span').html(title);
    if ($('#tc_container').length) {
        $('#tc_container').css(modalcss);
    } else {
        $('<div>', { 'id': 'tc_container' }).css(modalcss).insertAfter($('#alertmod'));
    }

$('#clonePopup').click(function (e) {
    $('#alertmod').hide();
    $('#alertcnt>div').html(' אנא, בחר שורה');
    $('#alerthd>span').html('אזהרה');
    popupClose.removeAttr('style');
    $('#alertmod').css('display', '');
    $('#tc_container').attr('style', 'display:none;'); 
    $('#clonePopup').remove();
   });
   $('#alertmod').show();
};

popup('Row saved successfully','Success');