CODEWITHSUNDEEP
javascriptjqueryjqgridfree-jqgrid
saeed a
saeed a

Reputation: 25

how show info_dialog set postion center in jqgrid

iam jqgrid ver 4.15 iam have a problem ..i want add inline record . filed name is required

  { name: "Name", width: 200, editable: true ,
            editrules: {required: true}
            }

I want when show position center info_dialog jqGrid popup modal . iam use help this links and other links but don't work how to center jqGrid popup modal window?

plase see this demo https://jsfiddle.net/dnfk8hmr/178/

iam want error modal in aling center

enter image description here

Upvotes: 0

Views: 1361

Answers (1)

Oleg
Oleg

Reputation: 221997

You write about adding inline record. Inline editing means editing fields inside of jqGrid. Modal windows will be used in case of form editing. What editing mode you really need to use?

As a workaround I can suggest you to combine form editing with inline editing. You can use form editing for Add operation and inline editing for editing existing lines. The corresponding code could looks like

$("#grid").jqGrid({
    ...
    navOptions: {
        edit: false,
        del: false,
        search: false,
        refresh: false
    },
    inlineNavOptions: {
        add: false,
        edit: true
    },
    formEditing: {
            beforeShowForm: function ($form) {
            var $dlgDiv = $form.closest(".ui-jqdialog"),
                    dlgWidth = $dlgDiv.width(),
                dlgHeight = $dlgDiv.height(),
                dlgStyle = $dlgDiv[0].style,
                    $gridDiv = $(this).closest(".ui-jqgrid"),
                gridWidth = $gridDiv.width(),
                gridHeight = $gridDiv.height();

              // TODO: change parentWidth and parentHeight in case of the grid
              //       is larger as the browser window
              dlgStyle.top = Math.round((gridHeight - dlgHeight) / 2) + "px";
              dlgStyle.left = Math.round((gridWidth - dlgWidth) / 2) + "px";
        }
    }
}).jqGrid("filterToolbar")
        .jqGrid("navGrid")
    .jqGrid("inlineNav");

see https://jsfiddle.net/dnfk8hmr/196/

UPDATED: If you want to position the dialog in the middle of window instead of the middle of grid and if you include jQuery UI JS file additionally to CSS then the code could be the following

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

see https://jsfiddle.net/dnfk8hmr/202/

Upvotes: 1

Related Questions