Skip to main content Skip to footer

Send Cell into Edit Mode on Single Click in Angular

Background:

Typically, to send a FlexGrid cell into edit mode, the user is required to double-click on the cell. That can be changed to send a cell into edit mode as soon as the grid's selection changes over to that cell.

Steps to Complete:

1. Assign a method to the selectionChanged event

2. Call the startEditing() method to send the cell into edit mode

Getting Started

Assign a method to the selectionChanged event

First, a method needs tied to the selectionChanged event so that we have something to check that we've changed cells. 

<wj-flex-grid #flexTemp [itemsSource]="data" [keyActionTab]="'Cycle'" (selectionChanged)="selectionChanged(flexTemp, $event)></wj-flex-grid>

Call the startEditing() method to send the cell into edit mode

Inside the selectionChanged() method, we call startEditing() and pass in the current row and column, which will send the cell we just entered into edit mode.

selectionChanged(flexTemp, event) {
    flexTemp.startingEditing(true, event.row, event.col);
}

You can also find a live sample of this project at this location: https://stackblitz.com/edit/wijmo-knowledgebase-angular-flexgrid-edit-on-selection-change

Joel Parks