javascript - jqgrid inline edit conflicts with form editing - Stack Overflow

admin管理员组

文章数量:1405289

I'm using free jqGrid form editing (navGrid) with also inline editing (inlineNav) only for editing using Enter and Esc keys.

  $('#gridId').jqGrid('navGrid','#pagerId',
    {edit: true, add: true, del: true, search: true, view: true, refresh: true})
  
  .jqGrid('inlineNav','#pagerId',
    {edit: true, add: false, save: false, cancel: false, editParams: {keys: true}});

Some problems arise when the user enters inline editing and fets to accept or cancel it with the proper key (Enter or Esc).

If the refresh button is pressed, nothing is refreshed from the server, which may be OK taking into account that the inline editing is still pending to be accepted.

But if delete or add button are pressed, the grid reacts as if no inline editing where pending: deleting the row or showing a form to add a record, respectively.

Also, if some columns have search attribute set to true, you can fill search fields in the tool bar but nothing happens when you accept them pressing Enter key ( nothing is sent to the server ).

All this may be confusing for the user who enters inline editing, but fets to accept or cancel it and continues to operate on the grid.

I wonder if there is a way to prevent doing other operations on the grid when inline editing starts, the same way that when a form editing starts the modal dialog prevents doing other operations.

Thanks in advance for any clue.

I'm using free jqGrid form editing (navGrid) with also inline editing (inlineNav) only for editing using Enter and Esc keys.

  $('#gridId').jqGrid('navGrid','#pagerId',
    {edit: true, add: true, del: true, search: true, view: true, refresh: true})
  
  .jqGrid('inlineNav','#pagerId',
    {edit: true, add: false, save: false, cancel: false, editParams: {keys: true}});

Some problems arise when the user enters inline editing and fets to accept or cancel it with the proper key (Enter or Esc).

If the refresh button is pressed, nothing is refreshed from the server, which may be OK taking into account that the inline editing is still pending to be accepted.

But if delete or add button are pressed, the grid reacts as if no inline editing where pending: deleting the row or showing a form to add a record, respectively.

Also, if some columns have search attribute set to true, you can fill search fields in the tool bar but nothing happens when you accept them pressing Enter key ( nothing is sent to the server ).

All this may be confusing for the user who enters inline editing, but fets to accept or cancel it and continues to operate on the grid.

I wonder if there is a way to prevent doing other operations on the grid when inline editing starts, the same way that when a form editing starts the modal dialog prevents doing other operations.

Thanks in advance for any clue.

• javascript
• jqgrid
• free-jqgrid

Share Improve this question Follow asked Mar 21 at 19:53 Romualdo CarusoRomualdo Caruso 6977 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You can disable pager buttons and search toolbar actions using editParams events.

Here's an example:

.jqGrid("inlineNav", "#pagerId", {
    edit: true,
    add: false,
    save: false,
    cancel: false,
    editParams: {
      keys: true,
      oneditfunc: function (rowId) {
        // Disable all navGrid buttons
        $("#pagerId .ui-pg-button").addClass("ui-state-disabled");

        // Disable the toolbar search inputs and reset filters button
        $grid.closest(".ui-jqgrid").find(".ui-search-toolbar").find("input,select").attr("disabled", "disabled");
        $grid.closest(".ui-jqgrid").find(".ui-search-clear").addClass("ui-state-disabled").find("a").off("click");
      },
      aftersavefunc: function (rowId, response) {
        // Re-enable all navGrid buttons
        $("#pagerId .ui-pg-button").removeClass("ui-state-disabled");

        // Re-enable the toolbar search inputs and reset filters button
        $grid.closest(".ui-jqgrid").find(".ui-search-toolbar").find("input,select").removeAttr("disabled");
        $grid.closest(".ui-jqgrid").find(".ui-search-clear").removeClass("ui-state-disabled").find("a").on("click", function () {$grid[0].clearToolbar()});
      },
      afterrestorefunc: function (rowId) {
        // Re-enable all navGrid buttons
        $("#pagerId .ui-pg-button").removeClass("ui-state-disabled")

        // Re-enable the toolbar search inputs and reset filters button
        $grid.closest(".ui-jqgrid").find(".ui-search-toolbar").find("input,select").removeAttr("disabled")
        $grid.closest(".ui-jqgrid").find(".ui-search-clear").removeClass("ui-state-disabled").find("a").on("click", function () {$grid[0].clearToolbar()});
      },
    },
})

Demo: https://jsfiddle/R_Caruso/cyq45L3s/

本文标签： javascriptjqgrid inline edit conflicts with form editingStack Overflow