What is the recomended way of programatically enter edit mode in a grid.

[Ugla-Bugla]

Hi,

Is there a recommended way to start editing a grid row by pressing an Edit button, like I’m trying to do in this StackBlitz example?

https://stackblitz.com/edit/3jt4bue8?file=src%2Fapp%2Fgrid%2Fgrid-row-editing-style%2Fgrid-row-editing-style.component.html

The approach I’m currently using seems to interfere with keyboard navigation - especially if I click on a cell before pressing Edit, and that cell is different from the one where I set the focus when edit mode is entered by using set cell.editMode = true.

I also get a console error if i click on an uneditable cell before i press the edit button and then use tab for navigating.

Ideally, I’d like to be able to:

Enter row edit mode by clicking an Edit button, without breaking keyboard navigation

Enter row edit mode by double-clicking anywhere in the row (even on uneditable cells), and automatically focus the first editable cell

Hopefully this makes sense - any guidance or examples would be really appreciated!

[RivaIvanova]

Hi @Ugla-Bugla,

I have been looking into your question, and what I can say is that for the keyboard navigation to continue working as expected, the cell needs to be activated, i.e., to indicate that it is currently active/focused.

I suggest using the IgxGrid navigateTo method and doubleClick event. The navigateTo method navigates to a position in the grid based on the provided row index and visible column index, and custom logic can be executed over the target element (cell) via a callback function.

Additionally, the doubleClick event is fired when a cell is double-clicked, regardless of being in edit mode or not.

Having the abovementioned in mind, the custom logic can look similar to the following:

<igx-grid
  …
  (doubleClick)="onDoubleClick($event)"
>
    …
</igx-grid>

public startEdit() {
  const selectedRowKey = this.selectedRow();
  if (!selectedRowKey) return;

  const selectedRowIndex = this.grid.getRowByKey(selectedRowKey).index;
  const cell = this.grid.getCellByColumn(selectedRowIndex, 'ReorderLevel');

  this.grid.navigateTo(cell.row.index, cell.column.index, (args) => {
      cell.editMode = true;
      args.target.activate();
  });
}

public onDoubleClick(args: IGridCellEventArgs) {
  if (!args.cell.editable && !this.isEditing) {
      this.startEdit();
  }
}

I hope the suggestion helps achieve your requirements.

[Ugla-Bugla]

That resolved it beautifully, Thanks!