Ag Grid -CellEditor FocusOut

Question

I want to call this.params.api.stopEditing(); when the CellEditor lose the focus.

app.component.ts

onFocusOut(): void {
   this.params.api.stopEditing();
}

app.component.html

<input #container triggers="" type="text" #dp="bsDatepicker" class="form-control" (bsValueChange)="onValueChange($event)" bsDatepicker 
[bsConfig]="{ dateInputFormat: 'DD.MM.YYYY', containerClass: 'theme-dark-blue' }"
[(ngModel)]="dateValue"
[minDate]="minDate"
[maxDate]="maxDate"
(focusOut)="onFocusOut()">

But focusOut is not triggered. Any idea why is not triggered?

score 3 · Accepted Answer · answered Oct 08 '18 at 17:56

3

It's not (focusOut), it's (focusout). Update your markup with that and verify.

For more references, check the answers for this post: HTML5 event handling(onfocus and onfocusout) using angular 2

answered Oct 08 '18 at 17:56

Paritosh

11,144
5
56
74

It works, but now I have another problem. The component is a DatePicker und has a button. When I am clicking a button on a right side inside the component, the input lose the focus. Any idea how can avoid the focusot by clicking the button? – user9923760 Oct 09 '18 at 08:23

score 1 · Answer 2 · answered Jan 30 '22 at 14:35

1

You can also add, at your gridOptions:

stopEditingWhenCellsLoseFocus: true

As you can see here: https://www.ag-grid.com/javascript-data-grid/cell-editing/#stop-editing-when-grid-loses-focus

answered Jan 30 '22 at 14:35

Marcos Laredo

11
2

Ag Grid -CellEditor FocusOut

2 Answers2