Clicking outside row editing is committing changes…

I’m on IG12.3 and AG 12.3.

I am asking a follow-up to onrowedit default behaviour, since that didn’t work for me. I assume I’m doing something wrong, as always, though.

Here is my grid declaration:

    
        
        
            Scenarios
        
        
            {{badNameWarning}}
        
        
            Cancel
            Done
        

        
            
                
                    
                
            
        
        
            {{cell.value}}
            
                
            
        
        
            {{cell.value}}
            
                
            
        
        
        
        
        
        
        
        
            {{value.replace('sys_nsgplanning', 'SYSTEM') | uppercase}}
        
        
            {{value | date:'MM/dd/yy hh:mm a'}}
        
        
            {{value.replace('sys_nsgplanning', 'SYSTEM') | uppercase}}
        
        
            {{value | date:'MM/dd/yy hh:mm a'}}
        
        
            

 

Here is my code for rowEdit and cellEdit:

  @ViewChild('scenarioList', { static: false, read: IgxGridComponent }) public scenarioList: IgxGridComponent;

  cellEditStart(e:any) {
    if (e.rowData.scenarioType == 'Actual' || (!this.globals.user.isAdmin && e.rowData.locked) || (!this.globals.user.isContributor)) { e.cancel = true; }
    const row = e && e.cellID ? this.scenarioList.getRowByIndex(e.cellID.rowIndex) : null;
    if (!row || !row.inEditMode) { this.scenarioList.endEdit(false); }
  };

  async rowEditedDone(e:IGridEditDoneEventArgs) {
    this.editingScenario = e.oldValue;
    this.updateScenario(e.newValue);
  };

The cancel button works fine, but when moving to a cell in a different row while editing, it commits the changes rather than discarding them.

Aside from committing changes users don’t want, it’s also incorrectly reporting the type of a scenario (comparing against the new row selected, rather than the original row being edited).

Hello,

I have been looking into your question, however, the thread you mentioned is from a year ago, the attached sample there uses igniteui-angular version 9 and after that, we introduce a lot of changes in the grid editing behavior as well as changes into the event names (e.g. onCellEditEnter is renamed to cellEditEnter).

More about all changes could be found in our release notes here.

I have prepared a sample that demonstrates how such behavior could be achieved using the rowEdit event which is cancelable and fires just before a row in edit mode's value is committed.

In the event handler, based on the target, you could cancel the event and call the grid's endEdit method with a 'false' flag in order to prevent changes to be committed.

public rowEdit(event) {
    if (event.event.target.tagName === 'IGX-GRID-CELL') {
      event.cancel = true;
      Promise.resolve().then(() => {
        this.grid1.endEdit(false);
      });
    }
  }

Here could be found my sample for your reference. Please test it on your side and let me know if I may be of any further assistance.

Sincerely,
Teodosia Hristodorova
Software Developer