AG grid: Disable edit rows unless save the one whhich is edited

Question

I have a requirement where, once the row edited in ag grid no other row should be allowed to edit unless the row has been saved.

is there any way to achieve it?

I am using onRowClick($event) method to put some validation, sample is mentioned below:

 onRowClick(event: any) {
        if (this.cellChangeCount === 0) {
            this.UnsavedNodeIndex = event.node.rowIndex;
            this.UnsavedNodeID=event.data.ID;
            console.log(event.node);
        }

        if (this.cellChangeCount !== 0 &&  (this.UnsavedNodeID!=event.data.ID )  && !this.newRowClicked) {

            if(typeof this.UnsavedNodeID !="undefined"){
            this.alertService.info("Save data first.");

            this.onBtStartEditing();
            }
        }
        if(this.newRowClicked==true   &&  (this.UnsavedNodeID!=event.data.ID )  ){
            this.gridApi.stopEditing();
            this.gridApi.setFocusedCell(0, 'ColName');
            this.gridApi.startEditingCell({
                rowIndex: 0,
                colKey: 'ColName',
            });
            this.gridApi.forEachNode(node=> node.rowIndex==0 ? node.setSelected(true) : node.setSelected(false))
        }
        this.cellChangeCount++
    }


 onBtStartEditing() {
        this.gridApi.stopEditing();
        this.gridApi.setFocusedCell(this.UnsavedNodeIndex, 'COlName');
        this.gridApi.startEditingCell({
            rowIndex: this.UnsavedNodeIndex,
            colKey: 'ColName',
        });
        this.gridApi.forEachNode(node=> node.rowIndex==this.UnsavedNodeIndex ? node.setSelected(true) : node.setSelected(false))
    }

this is working as of now, but I am looking for some robust solution if there is any. Thanks

Answer 1

You can specify a function that returns a boolean (instead of specifying a boolean) for the 'editable' property of a column definition.

The grid will evaluate this function every time the user attempts to edit a cell. If the function returns true, then the edit proceeds, and if it returns false, the cell will not enter edit mode.

So, if, for instance, you keep a 'dirty' flag that you set when an edit is made, and clear when you save, you could use

editable: () => return !this.dirty

Make sure that you use a "fat arrow function" as above, or it may not work correctly.