How to exit from (OnCellEdit) in igx grid without pressing enter or by pressing any key in keyboard?

I am using Angular and Ignite UI in my project.

Currently, I am facing an issue regarding the (OnCellEdit) action. As per my requirement, I have a form and (OnCellEdit) is required in one of the field. So, when I submit the form I want to get the value even if it is in edit mode i.e I want to get my value committed or if there is any way to get out of the edit mode without pressing any key.

Please help me out if there is any solution for this or any alternate solution regarding this.

Hello Shivam,

Thank you for posting to Infragistics community.

 

I noticed that the question in this forum thread is identical to an email support case with number CAS-212545-K1W2Q9. Please keep in mind that according to our support policy we handle single support case/forum thread per query. This helps us ensure that all your issues are addressed correctly.

 

As the duplicate question mentions using Ignite UI for Angular version 8.2.17, I assume this is also the case here as well.
Please, keep in mind that according to our Product Lifecycle page, Ignite UI for Angular version 8 is considered in an inactive state and is no longer eligible for support. This also means that it no longer receives maintenance and bug fixes.

 

Nevertheless, I created a small sample that demonstrates how your requirement can be achieved. You can find it on this link.

 

In order to be able to keep the cell’s editValue upon pressing a button, that commits the data,my suggestion is to make use of the IgxGrid’s onCellEditEnter event and store the edited cell in a component-scoped variable. This variable can then be used in the button’s click handler or wherever the data is committed, to retrieve the value in question:

 

  public lastEditdCell: IgxGridCellComponent;

  public log() {
    console.log(
      "Last edited cell's edit value: " + this.lastEditdCell.editValue
    );
    this.lastEditdCell.value = this.lastEditdCell.editValue;
    this.grid1.endEdit(true);
    //in case you like to remain in edit mode
    this.lastEditdCell.setEditMode(true);
  }

  public onCellEditEnter(event) {
    let row = this.grid1.getRowByIndex(event.cellID.rowIndex);
    let col = row.columns[event.cellID.columnID];
    this.lastEditdCell = this.grid1.getCellByColumn(
      event.cellID.rowIndex,
      col.field
    );
    console.log(this.lastEditdCell);
  }

 

By assigning the cell’s value to the last edited cell’s editValue  we are essentially keeping it, without having to manually exit edit mode (before the onCellEdit event firing). Then, by manually calling the grid’s endEdit(true) method the newly modified data is committed.  Additionally, if you would like to keep the last cell still in edit mode, you could call its setEditMode(true) method.

Alternatively, in case the grid’s rowEditable is set to true, you will not need to store the last edited cell variable and assign its editValue to its value before executing the endEdit(true) method. This is because, when rowEditable is “true”, the grid keeps a pending state of the currently edited row, which gets committed upon calling this method.

 

As mentioned, since Ignite UI for Angular version 8 is not supported, in case you consider upgrading, I have created a sample in the latest released version – 11.1.10. Please, find it here. The logic is essentially the same, however, there have been many changes in the IgxGrid’s API since version 8, so you will notice some differences between the two samples. One of the major differences is that since version 10.2.0 the main editing events have been renamed, for instance the “onCellEdit” event is now “cellEdit”. A complete list of the introduced changes can be found in out GitHub ChangeLog here.

 

Please, test the suggested samples on your side and let me know if they correctly address your requirement.

 

Sincerely,
Bozhidara Pachilova
Associate Software Developer

thanks my issue has been fixed.