CODEWITHSUNDEEP
jqueryjqgrid
Sanjay
Sanjay

Reputation: 1236

How to set position for Edit form of jqGrid as center of the window

I have jqGrid with Edit and Add forms, problem is displaying left side of the jqGrid, instead of center of the window, i have tried in different ways, but not getting, here my code is..

$(document).ready(function () {
    jQuery("#jQGridDemo").jqGrid({
        url: 'http://localhost:52618/Sample/GetEmployeeDetails',
        datatype: "json",
        mtype: "POST",
        colNames: ['Eno', 'Ename', 'City', 'Salary', 'Address', 'Actions'],
        colModel: [
         { name: 'Eno', index: 'Eno', width: 120, stype: 'text', height: 90, editable: true },
         { name: 'Ename', index: 'Ename', width: 150, editable: true },
         { name: 'City', index: 'City', width: 150, editable: true },
            { name: 'Salary', index: 'Salary', width: 100, height: 120, editable: true },
            { name: 'Address', index: 'Address', width: 100, height: 120, hidden: true, editable: true, editrules: { edithidden: true }, hidedlg: true },
             {
                 name: 'Actions', index: 'Actions', width: 100, height: 120, formatter: 'actions',
                 formatoptions: {
                     keys: true,
                     editformbutton: true,

                 }
             },
        ],
        rowNum: 10,
        add: true,
        addParams: { useFormatter: true },

        mtype: 'Get',
        loadonce: true,
        pager: '#jQGridDemoPager',
        viewrecords: true,
        caption: "List Employee Details",
        height: "230px",
        add: true,
    });

    jQuery("#jQGridDemo").jqGrid('navGrid', "#jQGridDemoPager", {

        add: true,
        edit: false,
        del: false

    });
});

Upvotes: 1

Views: 5945

Answers (3)

Yuri Sitnikov
Yuri Sitnikov

Reputation: 21

I tried Oleg's way but is does not work with last version of jqGrid 5.0.2. Next code works fine for me:

function centerjqdialog($form) {
    $form.closest(".ui-jqdialog").position({
        of: window,
        my: "center center",
        at: "center center"
    });
}

$.jgrid.regional["ru"].edit.afterShowForm = centerjqdialog;
$.jgrid.regional["ru"].del.afterShowForm = centerjqdialog;
$.jgrid.regional["ru"].search.afterShowForm = centerjqdialog;
$.jgrid.regional["ru"].view.afterShowForm = centerjqdialog;

Code regional["ru"] replace to regional["en"] or something else by your taste.

Upvotes: 1

vineel
vineel

Reputation: 3683

I got the same requirement, so added the properties of top and left as shown below.

{
                    name: 'Actions', index: 'Actions', width: 35, editable: false,
                    formatter: 'actions',
                    formatoptions: {
                        keys: true,
                        delbutton: false,
                        editformbutton: true,
                        editOptions: {
                            url: '/Account/EditUser',
                            width: dbWidth,
                            top: Math.max(0, ($(window).height() / 3)),
                            left: Math.max(0, ($(window).width() / 3)),
                            closeOnEscape: true,
                            afterComplete: function (response) {
                                if (response.responseText) {
                                    alert(response.responseText);
                                    $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
                                    if (response.responseText === "Saved Successfully")
                                        $('#cData').trigger('click');
                                }
                            }
                        }
                    }
                },

Upvotes: 1

Oleg
Oleg

Reputation: 222007

There are really many ways to change the position of Add/Edit form on the window. One way is the usage of jQuery UI position. It allows to to set position an element relative to the window, document, another element (for example relative to the grid). You can use beforeShowForm or afterShowForm callbacks for example. To set such callbacks for both Add and Edit dialogs you can extend $.jgrid.edit. Try the following code

$.extend(true, $.jgrid.edit, {
    recreateForm: true,
    beforeShowForm: function ($form) {
        $form.closest(".ui-jqdialog").position({
            of: window, // or any other element
            my: "center center",
            at: "center center"
        });
    }
});

UPDATED: The demo uses the above code.

Upvotes: 5

Related Questions