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

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');