How to prevent closing of cell editing in ag-grid on "Other Cell Focus"

Question

I am working on an editable table in Angular application with ag-grid library. I would like to keep editing cells (in full row edit mode) until I finish with it and then close the editors manually via API. The problem is that the editor is closing on other cell click/focus (on some other line) as described here:

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.

I cannot figure out how to disable this, if it is possible. Installing the onCellMouseDown() hook does not help, because the cellFocused event is fired before cellMouseDown. Therefore, the editing stops before I have a chance to intercept the mousedown event.

Here is my stackblitz little extract with related pieces of code.

The need for such scenario is that I want to validate the entry and not to allow a used to quit the editing if the form is not valid. The only workaround I found so far is that on any click outside of editing cells when the editor closing I reopen it right away in onRowEditingStopped() hook unless the editor has been closed via 'OK' button.

Answer 1

After all, I have managed to provide a custom solution that fits exactly into this problem which I was facing also.

First thing is to disable pointer events to non edited rows when a specific row is currently being edited. On Ag-grid's 'cellEditingStarted' callback I have added the following code:

public cellEditingStarted(event: any): void {
    //not all rows are on dom ag-grid takes care of it
    const nonSelectedGridRows = document.querySelectorAll('.ag-grid-custom-row:not(.ag-row-selected):not(.ag-row-editing):not(.pointer-events-none)');

    forEach(nonSelectedGridRows, row => {
        row.classList.add("pointer-events-none");
    });
}

Because not all rows exist on dom (Ag-grid creates and destroys while you are scrolling )when a specific cell is being edited, I have also added a rowClassRule which is applied when rows are being created:

this.rowClassRules = {            
        'pointer-events-none': params => {
            if (params.api.getEditingCells().length > 0) {
                return true;
            }

            return false;
        }
    };

scss:

.pointer-events-none {
  pointer-events: none
}

By disabling pointer events, when you click on a non edited cell the cell won't get focus and thus the currently edited cell will stil remain on edit mode. You can provide your own custom validation solution and close the editor manually through API. When you are done, you have to enable pointer events to all grid rows back again:

private enablePointerEvents(): void {
    //not all rows are on dom ag-grid takes care of it
    const nonSelectedGridRows = document.querySelectorAll('.ag-grid-custom-row.pointer-events-none');

    forEach(nonSelectedGridRows, row => {
        row.classList.remove("pointer-events-none");
    });
}

Answer 2

I implemented the same above approach in Ag-Grid React. I used getRowStyle callback for adding the css pointerEvents: none on dynemic basis. It seems to be working for me fine. Please refer the below code

const getRowStyle = (params) => {
// this is not initialized in read mode
// condition for me ==> currentEditRowIndex.current !== null && params.node.rowIndex !== currentEditRowIndex.current
if (someCondition for Row other than inline edit row) {
  return { pointerEvents: "none" };
}
return null;
};

After adding this whenver you start the editing..You will need to call redrawRows so that css changes can be applied.

Hope this will help. Thank You!!