IGX-grid uncontrollable edit event

[kevalgw]

Hi,

In my IGX gird when one row is toggled to edit mode other cells from different row are also editable. I want to restrict user from editing cells from other row. please provide me with a solution

[georgianastasov]

Hello @kevalgw,

Since it's not mentioned I'm not too sure if you're using cell editing or row editing mode.

In cell editing mode you will have a boolean flag to check if a cell is currently being edited or not, you will also have a row index variable and a variable to hold the cell being edited. You will handle the cellEditEnter event of the grid and when it fires, you will check whether a cell is currently being edited or not, if it is not being edited, the flag will be set to true, the index of the given row and the cell being edited will be taken. In the other case, when the event is executed and a given cell is currently being edited, it will be checked whether the index of the row that starts to be edited and the index of the row that is being edited at the moment are the same, if they are the same, the editing of the cells will continue from this row, if the indexes are different, the event will be canceled and the last edited cell will return to edit mode.

public editStart(event){
      let curentColumn = this.grid.getColumnByVisibleIndex(event.cellID.columnID);
      let curentCell = this.grid.getCellByColumn(event.cellID.rowIndex, curentColumn.field);
      if(!this.editing){
        this.editing = true;
        this.rowIndex = event.cellID.rowIndex;
        this.editedCell = curentCell;
      } else {
        if(event.cellID.rowIndex !== this.rowIndex){
          event.cancel = true;
          this.toast.open();
          setTimeout(() => {
            this.editedCell.editMode = true;
          }, 20)
        } else {
          this.editedCell = curentCell;
        }
      }
    }

The boolean flag will only be set to false when editing is complete when the grid's cellEditDone event fires.

public editDone(event){
      this.editing = false;
}

Here you can find a sample that illustrates the described scenarios.

In row editing mode, you will again have the boolean flag to check whether a row is currently being edited or not, as well as a variable for the index of the row and for the cell being edited. You will handle the cellEditEnter event and again the procedure is the same. However, rowEditEnter will also be handled here because it is executed when the row is edited in row editing mode and it will be checked whether it is currently being edited and if so, it will be checked whether the index of the row that starts to be edited and the index of the row that is being edited at the moment are different, and if they are different, the event will be canceled and the last taken cell will be returned in edit mode.

public editStartRow(event){
    if(this.editing){
        if(event.rowID - 1 !== this.rowIndex){
            event.cancel = true;
            this.toast.open();
            setTimeout(() => {
              this.editedCell.editMode = true;
            }, 20)
      } 
  }
}

The boolean flag will be set to false again when firing the cellEditDone event as well as rowEditDone and rowEditExit events only when editing is complete with the ‘Done’ and ‘Cancel’ buttons pressed.

  public editDoneRow(event){
    if(event.event.path[0].innerHTML === "Done"){
        this.editing = false;
    }   
  }

  public editExitRow(event){
    if(event.event.path[0].innerHTML === "Cancel"){
        this.editing = false;
    }  
  }

In addition, I have prepared small sample illustrating this behavior which could be found here.