当单击网格上的任何其他单元格时，Ag Grid将停止编辑单元格.如何预防呢? [英] Ag Grid stops editing cells when any other cell on the grid is clicked. How to prevent this?

问题描述

我有一个具有 fullRow 编辑功能的Ag网格.单击 Edit 按钮(使用网格的 startEditing()方法)时，该行进入编辑模式.

I have an Ag Grid with fullRow edit functionality. The row enters edit mode when an Edit button is clicked (using the startEditing() method of the grid).

在编辑模式下，我显示两个按钮， Save 和 Cancel .我已经找到了抑制键盘事件(Enter，Esc等)的方法.但是当单击另一个单元格时，我找不到任何方法来阻止网格退出编辑模式.我希望即使单击网格的另一部分，行仍处于编辑模式.

On edit mode, I display two buttons, Save and Cancel. I've found ways to suppress Keyboard events (Enter, Esc etc). But I can't find any way to stop the grid from exiting edit mode when another cell is clicked. I want the row to still be on edit mode even when another part of the grid is clicked.

如何实现此功能?谢谢

N:B:我正在将ag-grid(最新版本)与Angular 9配合使用

N:B: I'm using ag-grid (latest version) with Angular 9

推荐答案

AG-Grid文档声明以下内容:

发生以下任何一种情况时，网格将停止

The grid will stop editing when any of the following happen:

其他单元格焦点:如果网格中的焦点转到另一个单元格，编辑将停止.

Other Cell Focus: If focus in the grid goes to another cell, the editing will stop.

这似乎是导致大多数问题的功能.如另一个答案中所述，无法使用ag-grid开箱即用地禁用此功能，这是不幸的.在ag-grid处理了单元格焦点之后，ag-grid提供的事件处理程序将全部运行，因此它们都无济于事.还有一些选项可以禁用对行的单击，但是这些选项都不能阻止单元格获得焦点.

This is the functionality that seems to cause most of the problems. As was stated in another answer, there is no way to disable this functionality out of the box with ag-grid which is unfortunate. The event handlers that ag-grid provides all run after ag-grid has processed a cell-focus so none of them are helpful. There are also options to disable clicks on rows but none of these stop the cell from gaining focus.

因此，如果您使用内置的编辑器而不必处理丢失编辑器状态的情况，那么Pratik Bhat提出的解决方案是最佳选择.

As a result, the solution posed by Pratik Bhat is the best option if you're using the built in editors and don't have to deal with losing the editor state.

如果您使用的是自定义编辑器组件，则每次ag-grid关闭编辑器时都会丢失状态，这是一个巨大的问题.我能够提出以下解决方法，以防止单元格的焦点触发stopEditing事件.此解决方法很丑陋，我只建议将其作为万不得已的方法.

If you are using a custom editor component, losing the state every time ag-grid closes the editor is huge problem. I was able to come up with the following workaround to prevent the focus of a cell from triggering the stopEditing event. This workaround is ugly and I only recommend it as a last resort.

解决方法:

AG-Grid源代码定义了onCellFocused的原型.您可以在应用程序源代码中覆盖此函数，并删除调用stopRowOrCellEdit()的代码，这将阻止其他行的焦点停止编辑模式.下面是您需要在应用程序源代码中包含的代码片段的示例(请务必删除注释下方的行).

The AG-Grid source code defines a prototype for onCellFocused. You can overwrite this function in your applications source code and remove the code that calls stopRowOrCellEdit() which will prevent focus of other rows from stopping edit mode. Below is an example of the code snippet you would need to include in your application source code(be sure to remove the lines below the comment).

如果您决定采用这种方法，请确保从您正在使用的AG网格版本的源代码中复制函数原型，而不是从本示例中复制该函数原型.此示例来自ag-grid 22.0.1，因此该功能在您的ag-grid源中可能会有所不同.请记住，如果更新AG网格，则可能需要更新函数覆盖，以使其与新版本匹配.农业网格资源.如果您使用包管理器，请确保锁定了ag-grid的版本，以便应用程序源代码中被覆盖的原型与之匹配.

If you decide to go this route, be sure to copy the function prototype from the source code of the version of AG grid you are using and not from this example. This example is from ag-grid 22.0.1 so the function may differ in your ag-grid source. Keep in mind, if you update AG grid, you may need to update your function overwrite so that it matches the new ag-grid source. If you use a package manager make sure your locking the version of ag-grid so the overwritten prototype in your application source code will match.

import { CellComp, _ } from 'ag-grid-community';

CellComp.prototype.onCellFocused = function(event) {
      var cellFocused = this.beans.focusedCellController.isCellFocused(
        this.cellPosition
      );
      
      if (cellFocused !== this.cellFocused) {
        var doingFocusCss = !this.beans.gridOptionsWrapper.isSuppressCellSelection();
        if (doingFocusCss) {
          _.addOrRemoveCssClass(this.getGui(), 'ag-cell-focus', cellFocused);
        }
        this.cellFocused = cellFocused;
      }
      
      if (cellFocused && event && event.forceBrowserFocus) {
        this.getGui().focus();
        if (
          !document.activeElement ||
          document.activeElement === document.body
        ) {
          this.getGui().focus();
        }
      }

      // remove these lines to prevent editing from being stopped on focus
      var fullRowEdit = this.beans.gridOptionsWrapper.isFullRowEdit();
      if (!cellFocused && !fullRowEdit && this.editingCell) {
        this.stopRowOrCellEdit();
      }
    };

这篇关于当单击网格上的任何其他单元格时，Ag Grid将停止编辑单元格.如何预防呢?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！