0

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

Oleg
  • 220,925
  • 34
  • 403
  • 798
saeed a
  • 25
  • 7
  • 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? – Oleg Mar 03 '18 at 11:37

1 Answers1

1

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/

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • @saeeda: Every post especially with demo take time. I can't create many solution just because you save your time in describing your problem shortly and not clear enough. Your last picture shows **validation error**. The default behavior displays the dialog directly *under* the field with the error. If the grid has many rows and your would center the validation error modal window then the dialog could be displayed on not visible part of the screen. – Oleg Mar 03 '18 at 12:58
  • @saeeda: Look at [the demo](http://www.ok-soft-gmbh.com/jqGrid/ChangeDelDialogPosition.htm) created for [the answer](https://stackoverflow.com/a/5720456/315935). Select some row near to the last lines and click on Delete button. You will see modal dialog new the selected line. Without the code the page will be blocked and the modal will be displayed on the top or on the center of the grid, which could be not visible for the user. What you ask can follow serious problems for the user. – Oleg Mar 03 '18 at 12:58
  • @saeeda: In general, there are exist no direct way to change position of validation dialog. I can suggest only to define custom `$.jgrid.jqModal.onShow` or to replace `$.jgrid.showModal`. See [the old answer](https://stackoverflow.com/a/8786177/315935) as an example. – Oleg Mar 03 '18 at 13:06
  • thanks.dont wok for me.this don't solution for center postion dialog error in page ? – saeed a Mar 03 '18 at 13:19
  • @saeeda: I'm not sure what you mean. I wrote you many alternatives. What you mean in your last comment? Validation dialog or Add new row of form editing or some other dialog? Moreover your wrote in your question about "center" like in my old answer, which center *relative to the grid* and not relative to the page or relative to the visible part of the page. All such kind of centering are different. The default position of validation seems me the best because the user enter the data in the added row and the dialog will be displayed near (under) the field, which has validation error. – Oleg Mar 03 '18 at 13:25
  • iam need alert validation error dialog is postion center in page .but show Right corner .. – saeed a Mar 03 '18 at 13:34
  • @saeeda: I wrote you before that free jqGrid like old jqGrid has *no special options*, which allows you to change the position of validation dialog displayed for inline editing. The only way will be to replace `$.jgrid.showModal` or to define your own `$.jgrid.jqModal.onShow`. [The old answer](https://stackoverflow.com/a/8786177/315935), which I referenced before shows how one can do that. You will have full control about the options of modal dialog and can change it position like you want. The minimal code is `showModal: function(h) { h.w.show("slow"); }`, but you can add more custom actions. – Oleg Mar 03 '18 at 13:39
  • thanks this work for me.please update answer to accept solution. – saeed a Mar 04 '18 at 04:24
  • please answer this :https://stackoverflow.com/questions/49624829/dont-count-comma-separated-in-maxlength-jqgrid-column-deciamal – saeed a Apr 07 '18 at 10:31
  • @saeeda: I've seen the question, but it's very unclear. Please include in every question about jqGrid the version of jqGrid, which you use and the fork. Additionally, you should describe your main problem more detailed and exact. You write about "input" field, then you means probably some problem with **editing**. Which **editing mode** you use (inline editing, form editing, cell editing). You should include *examples* of input data for the field additionally. You write about some special characters, but don't post any examples. Your code contains syntax error `maxlength; 5` with `;` (not `:`) – Oleg Apr 07 '18 at 10:40
  • @saeeda: `maxLength` is just **attribute** of `` element. One can use `dataInit` callback for any custom initializations. The callback get the input element as the first parameter and the options as the second parameter. It should be enough for you I think. – Oleg Apr 07 '18 at 10:44