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.

Grieco

i will defiantly mark your answer if it works for me ...help me please – Grieco

are you kidding me... i am talking about the default dialogbox.. which shows error, info, notification... jqgrid in build dialog box. how to set the position of that dialog box – Grieco

cant u view class of that dialog and according to change css through jquery – Recently

@RKSharmaSharma: You describe that the default position of the error message is not good, but you don't rescribed which position you what to have. – Incompliant

i did just you said but its not working – Grieco

i have also tried $("#info_id").css('background-image', 'url("/Scripts/jqueryui/smoothness/images/ui-bg_flat_75_ffffff_40x100.png")'); – Grieco

By the way if you write a comment to your own question nobody will be informed about that. Instead of that you can write a comment under the answer to your old question. Then the person who write the answer will be informed about your comment. You can use syntax like "@Oleg" to inform specific person if multiple persons wrote comments here before. – Incompliant

sry ;) i will keep in mind this useful information..thanks – Grieco

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.

Incompliant

@RKSharmaSharma: You are welcome! To make the second working you need include jQuery UI. The demo demonstrates usage of .position. Just try to edit some cell in the first column and save it you will see the error message after the edited row. – Incompliant

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.

Telmatelo

i have tried it to change the background but didn't works for me $("#info_id").css('background-image', 'url("/Scripts/jqueryui/smoothness/images/ui-bg_flat_75_ffffff_40x100.png")'); – Grieco