How to adjust datepicker view inside ag grid cell render template?

Question

I use cell rendering in my ag-grid for editing a date field.Inside that cell datePicker is added as shown

But when i am clicking the date icon date picker view is like it is fully mounded inside the cell and not visible properly.the below picture shows my issue

@Component({
  selector: 'app-gender-renderer',
  template: `  `
  <input type="text" id="recording_date_to" [(ngModel)]="changedRecDateTo" (change)="edit()"
  ngbDatepicker #d="ngbDatepicker" style="z-index: 0;"
  class="form-control input-sm" />
  <button class="glyphicon glyphicon-calendar" (click)="d.toggle()" type="button"></button>
})

Tried z index , it is also not working..

Can anyone please help me to solve this ?

Thank You in advance

un.spike un.spike · Accepted Answer · 2020-03-29T17:45:32

As mentioned before, to be able to use DatePicker in cell you need to create cellEditor instead of cellRenderer, however, cellEditor just like an extension for cellRenderer.

So for angular, you need to use ICellEditorAngularComp interface and take care of

agInit(params: any): void // for init value which would be used in DatePicker

and

getValue(): any // for passing value back to the grid (and update the cell)

don't forget to return true in isPopup(): boolean method - for correct visibility.

Now, about DatePicker itself, I'm using @danielmoncada/angular-datetime-picker

(but for sure you can use anything)

And there are a few things that you need to take care :

what type of value is the datepicker library using
what type of value you will use for view and for database

and it could be handled with getValue and valueFormatter methods

That's all for theory, check my demo below and feel free to ask anything related, will try to help.

DEMO

How to adjust datepicker view inside ag grid cell render template?

2 Answers