prevent stopEditing to execute for cell

  ag-grid, angular, html, typescript

I have an ag-grid table with a lot of cells. When I click outside the edited cell I do want the edit to stop, except for one cell. Which is my cell onskatLevdatum with a custom cellEditor datepicker that opens an Angular Material datepicker and for all cells I have the GridOptions stopEditingWhenGridLosesFocus: true which execute stopEditing when you click outside of the cell.

custom cell renderer

Coldefs for my onskatLevdatum cell with my custom datepicker:

protected createOnskatLevdatumColDef(deluppdragComponent: UpUppdragDeluppdragComponent): ColDef {
    return {
      headerName: "Önskat leveransdatum (LST)",
      field: "onskatLevdatum",
      minWidth: 160,
      colId: "onskatLevdatum",
      filter: "agDateColumnFilter",
      resizable: true,
      sortable: true,
      cellEditor: "dateEditor",
      headerTooltip: "Önskat leveransdatum",
      valueFormatter: (params) => ? this.datePipe.transform(, 'yyyy-MM-dd') : null,
      onCellValueChanged: (params) => this.updateOnskatLevdatum(deluppdragComponent,, params.newValue)

the cellEditor datepicker:

      selector: "input-cell",
      template: `
        <mat-form-field class="input-width" appearance="outline">
          <input [(ngModel)]="inputDate" matInput [matDatepicker]="datepicker">
          <mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
          <mat-datepicker #datepicker></mat-datepicker>
      styles: [
    export class DateEditorComponent implements ICellEditorAngularComp {
      inputDate: number;
      agInit(params: ICellEditorParams): void {
        this.inputDate = params.value;
      getValue() {
        return this.inputDate ? new Date(this.inputDate).getTime() : null;
      isPopup(): boolean {
        return true;

How do I prevent stopEditing to execute when I click outside the cell?

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.