how to set the position of error dialog of jqgrid?

Question

i am using jqgrid and my js cod is

jQuery(document).ready(function () {

    var grid = jQuery("#grid");

    grid.jqGrid({
        url: '/Admin/GetUserForJQGrid',
        datatype: 'json',
        mtype: 'Post',
        cellsubmit: 'remote',
        cellurl: '/Admin/GridSave',

        //formatCell: emptyText,
        colNames: ['Id', 'Privileges', 'First Name', 'Last Name', 'User Name', 'Password', 'Password Expiry', 'Type', 'Last Modified', 'Last Modified By', 'Created By', ''],
        colModel: [
            { name: 'Id', index: 'Id', key: true, hidden: true, editrules: { edithidden: true } },
            { name: 'Privileges', index: 'Privileges', width: "130", resizable: false, editable: false, align: 'center', formatter: formatLink, classes: 'not-editable-cell' },
            { name: 'FirstName', index: 'FirstName', align: "left", sorttype: 'text', resizable: true, editable: true, editrules: { required: true } },
            { name: 'LastName', index: 'LastName', align: "left", sorttype: 'text', resizable: true, editable: true, editrules: { required: true } },
            { name: 'UserName', index: 'UserName', align: "left", sorttype: 'text', resizable: true, editable: true, editrules: { required: true } },
            { name: 'Password', index: 'Password', align: "left", sorttype: 'text', resizable: true, editable: false, editrules: { required: true }, classes: 'not-editable-cell' },
            {
                name: 'Password_Expiry', index: 'Password_Expiry', align: "left", resizable: true, editable: true, editoptions: {
                    size: 20, dataInit: function (el) {
                        jQuery(el).datepicker({
                            dateFormat: 'yy-mm-dd', onSelect: function (dateText, inst) {

                                jQuery('input.hasDatepicker').removeClass("hasDatepicker")                               
                                return true;
                            }
                        });
                    }
                }
            },


            {
                name: 'Type', width: "100", index: 'Type', sorttype: 'text', align: "left", resizable: true, editable: true, editrules: { required: true }, edittype: 'select', editoptions: {
                    value: {
                        'Normal': 'Normal',
                        'Sales': 'Sales',
                        'Admin': 'Admin',
                        'SuperAdmin': 'SuperAdmin'
                    },
                    dataEvents: [
                            {
                                type: 'change',
                                fn: function (e) {

                                    var row = jQuery(e.target).closest('tr.jqgrow');
                                    var rowId = row.attr('id');
                                    jQuery("#grid").saveRow(rowId, false, 'clientArray');
                                }
                            }
                    ]
                }
            },
            { name: 'Modified', index: 'Modified', sorttype: 'date', align: "left", resizable: true, editable: false, classes: 'not-editable-cell' },
            { name: 'ModifiedBy', index: 'ModifiedBy', sorttype: 'text', align: "left", resizable: true, editable: false, classes: 'not-editable-cell' },
            { name: 'CreatedBy', index: 'CreatedBy', sorttype: 'text', align: "left", resizable: true, editable: false, classes: 'not-editable-cell' },
            { name: 'Delete', index: 'Delete', width: 25, resizable: false, align: 'center', classes: 'not-editable-cell' }

        ],
        shrinkToFit: true,
        delete: true,

        pager: '#pager',
        height: '100%',
        width: "703",


        **afterSubmitCell: function (serverStatus, rowid, cellname, value, iRow, iCol) {

            var response = serverStatus.responseText;
            var rst = 'false';
            debugger;
            if (response == rst) {
                debugger;               

                return [false, "User Name Already Exist"];

            }
            else {

                return [true, ""];

            }
        },**



        rowNum: 10,
        rowList: [10, 20, 50, 100],
        sortable: true,
        loadonce: false,
        ignoreCase: true,

        caption: 'Administration',

        search: false,

        del: true,
        cellEdit: true,
        hidegrid: false,
        viewrecords: true,
        gridComplete: function () {

            var ids = grid.jqGrid('getDataIDs');
            for (var i = 0; i < ids.length; i++) {
                var isDeleted = grid.jqGrid('getCell', ids[i], 'Delete');
                if (isDeleted != 'true') {
                    grid.jqGrid('setCell', ids[i], 'Delete', '<a href="#" onclick="deleteUser(' + ids[i] + ');"><img src="/Images/delete.png" alt="Delete Row" /></a>');
                }
                else {
                    grid.jqGrid('setCell', ids[i], 'Delete', ' ');
                }
            }
        }
    }

    );

see on the aftercellsubmit i am returning the false value and error message. this dialog box appears at the left of page (wrong position) i need this dialog box on the jqgrid. can anybody help me.... thanks in advance :) and i also want to change the look of that dialog, i have tried $("#info_id").css('background-image', 'url("/Scripts/jqueryui/smoothness/images/ui-bg_flat_75_ffffff_40x100.png")'); in my page in document.ready event but its not working.

Answer 1

The simplest way would be to add the code like

setTimeout(function () {
    $("#info_dialog").css({
        left: "30px", // new left position of ERROR dialog
        top: "10px"   // new top position of ERROR dialog
    });
}, 50);

inside of afterSubmitCell callback (somewhere before the return statement). The rowid parameter of afterSubmitCell callback and jQuery UI Position method provides you simple way to move error dialog under the row which are editing. You need just replace css used in the code above to position:

setTimeout(function () {
    $("#info_dialog").position({
        of: $("#" + $.jgrid.jqID(rowid)),
        my: "top",
        at: "bottom"
    });
});

I didn't tested the code, but I hope it will work.

UPDATED: The dummy demo (without any code on the server which really saves the data) demonstrates the usage of $("#info_dialog").position({...}). Just try to edit some cell and press Enter to save the data. You will see error message directly after the line which you edited.

Answer 2

I would suggest inspecting you page and getting the element id of the dialog container and setting it's css to you desired position.

Update:

That probably doesn't work because the '#info_id' doesn't exist yet. You should attach attach a listener to the "DOMSubtreeModified" event like

document.addEventListener("DOMSubtreeModified", function (e) {
  if(e.target.id == 'info_id'){
    $('#info_id').css('your css info here');
   }

  }, false);

Be aware that DOMSubtreeModified is deprecated but if this is an internal tool and you are only using it in a very limited fashion it shouldn't be an issue.