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

问题

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

view of my cell

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

回答1:

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

回答2:

Two things...

First, if you are really using a date picker in a cell renderer, don't. That should be done in a cell editor, not a renderer.

Second, if you want to have an editor that is not constrained by the cell, you have to specify that the editor is a 'popup' editor by implementing isPopup() in your editor, and returning true.

The documentation for this is at https://www.ag-grid.com/javascript-grid-cell-editing/#popup

来源：https://stackoverflow.com/questions/60882662/how-to-adjust-datepicker-view-inside-ag-grid-cell-render-template

标签

angular8

ag-grid