cell editor framework cannot display over the grid

Question

I had created a custom picker in the cell editor framework but I always display inside the grid. How can I change the code to make it display out, which like the picture shown. I had set the isPopup() to true.

This is what the problem that I currently faced.

I want to make it like this

score 1 · Accepted Answer · answered Jun 05 '18 at 06:05

1

Is this what you're trying to accomplish:

If so, here's what I do to achieve it:

In afterViewInit (the component class implements AfterViewInit):

const startDateColDef: ColDef = this.grid.columnApi.getColumn('startDate').getColDef();
startDateColDef.cellEditorFramework = GridCellDateComponent;
startDateColDef.valueFormatter = (pars: ValueFormatterParams) => GridCellDateComponent.formatForDisplay(pars);

The GridCellDateComponent template contains:

<mat-form-field>
  <input
    matInput
    [matDatepicker]='picker'
    [(ngModel)]='value'
    >
  <mat-datepicker-toggle
    matSuffix
    [for]='picker'
    >
  </mat-datepicker-toggle>
</mat-form-field>
<mat-datepicker
  #picker
  (selectedChanged)='onSelectChange(event)'
  >
</mat-datepicker>

The component class file contains:

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ICellEditorParams, SelectionChangedEvent } from 'ag-grid';
import { MatDatepicker } from '@angular/material';
import { ValueFormatterParams } from 'ag-grid/dist/lib/entities/colDef';

@Component({
  templateUrl: './grid-cell-date.component.html',
  styleUrls: ['./grid-cell-date.component.css']
})
export class GridCellDateComponent implements AfterViewInit {
private cellEditorParams: ICellEditorParams;
private columnWidth: string;
private value: string;
@ViewChild('picker', {read: MatDatepicker}) picker: MatDatepicker<Date>;

public static formatForDisplay(params: ValueFormatterParams): string {
  if (!params) {
    return '';
  }
  let date: Date;
  if (typeof params.value === 'number' || typeof params.value === 'string') {
    const stringValue = String(params.value);
    if (stringValue.length > 7 && /^[0-9]*$/.test(stringValue)) {
      const year: number = parseInt(stringValue.substring(0, 4), 10);
      const month: number = parseInt(stringValue.substring(4, 6), 10);
      const day: number = parseInt(stringValue.substring(6, 8), 10);
      date = new Date(year, month - 1, day);
    }
  } else {
    date = params.value;
  }
  return date ? date.toLocaleDateString() : '';
}

agInit(params: ICellEditorParams): void {
  this.cellEditorParams = params;
  this.value = params.value;
  console.log(this.value);
}

getValue(): string {
  console.log(this.value);
  return this.value;
}

isCancelAfterEnd(): boolean {
  return false;
}

isCancelBeforeStart(): boolean {
  return false;
}

isPopup(): boolean {
  return false;
}

ngAfterViewInit() {
  this.picker.open();
}

onSelectChange(event: SelectionChangedEvent): void {
  setTimeout(() => {
    this.cellEditorParams.stopEditing();
  });
}

}

I got most of the guidance for this from this link: Datepicker Cell Editor Example.

answered Jun 05 '18 at 06:05

Andy King

1,632
2
20
29

yes! thank you for the help and sorry for the late reply. But another problem that I met which I click on any part of the calendar, it will close itself. Is there any way to prevent the calendar dialog close until the user select a date? – Jim Jun 06 '18 at 03:24
@Jim Are you saying that the calendar popup closes when you click inside it (not on a date), or that it closes when you click outside it? My example doesn't close when I click inside the popup, but it does close if I click outside. You could look at this to get an idea of how to prevent this behavior: https://stackoverflow.com/questions/48589538/how-to-keep-mat-datepicker-calender-open-even-after-selecting-a-date-from-calen. In my app I just give the user an error message if they try to save the data without setting a date. – Andy King Jun 06 '18 at 07:22
@Jim Here's another possible direction to take if you want to prevent the popup from closing: https://stackoverflow.com/questions/46967970/how-to-prevent-angular-material-mat-menu-from-closing. – Andy King Jun 06 '18 at 07:25
It close when I click inside the calendar. Example, I click one '>' this icon to go to next month but the calendar close itself. I will take a look and tried with those link. Thank you for provide me the solution. If it does not work for me, I will post my question over here again. – Jim Jun 06 '18 at 08:17
where should I include this 'const startDateColDef: ColDef = this.grid.columnApi.getColumn('startDate').getColDef(); startDateColDef.cellEditorFramework = GridCellDateComponent; startDateColDef.valueFormatter = (pars: ValueFormatterParams) => GridCellDateComponent.formatForDisplay(pars);'?? – Jim Jun 06 '18 at 08:52
I try to use your code and I cant open the dialog when I click on the cell. If I remove this.picker.open(); then It works but the dialog will still close itself – Jim Jun 06 '18 at 08:53
The setting of the `valueFormatter` is in the `afterViewInit` function in the component that contains the grid. – Andy King Jun 06 '18 at 18:15
so the code will be like this? ngAfterViewInit(): void { const startDateColDef: ColDef = this.gridColumnApi.getColumn('date').getColDef(); startDateColDef.cellEditorFramework = DatepickerEditorComponent; } – Jim Jun 07 '18 at 09:08
But I will get this error ----- ERROR TypeError: Cannot read property 'getColumn' of undefined – Jim Jun 07 '18 at 09:08
I had port my code in above. Can help me to take a look? Cos When I click inside the calendar, it will still close itself. – Jim Jun 07 '18 at 11:15
You have `this.gridColumnApi.getColumn...`. I have `this.grid.columnApi.getColumn...`. I also have `@ViewChild('grid') private grid: AgGridNg2;` in the component class, with a `#grid` annotation on the `ag-grid-angular` component in the template. – Andy King Jun 08 '18 at 16:44

cell editor framework cannot display over the grid

1 Answers1