如何在 ag 网格单元格渲染模板中调整 datepicker 视图？

Question

我在我的 ag-grid 中使用单元格渲染来编辑日期字段。在该单元格内添加 datePicker，如图所示

view of my cell

但是当我点击日期图标时，日期选择器视图就像是完全堆积在单元格内并且无法正常显示。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>
})

尝试了 z index ，它也不起作用..

谁能帮我解决这个问题？

提前谢谢你

Answer 1

如前所述，要能够在单元格中使用DatePicker，您需要创建cellEditor 而不是cellRenderer，但是，cellEditor 就像cellRenderer 的扩展一样。

所以对于 Angular，你需要使用ICellEditorAngularComp 接口并照顾好

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

和

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

不要忘记在 isPopup(): boolean 方法中返回 true - 以获得正确的可见性。

现在，关于 DatePicker 本身，我使用的是 @danielmoncada/angular-datetime-picker

（但可以肯定你可以使用任何东西）

还有一些事情你需要注意：

1. datepicker 库使用什么类型的值
2. 您将用于视图和数据库的值类型

可以使用getValue 和valueFormatter 方法处理

这就是理论的全部内容，请查看下面的演示，并随时提出相关问题，我们会尽力提供帮助。

DEMO

Answer 2

两件事...

首先，如果您真的在单元格渲染器中使用日期选择器，请不要这样做。 这应该在单元格编辑器中完成，而不是渲染器。

其次，如果你想要一个不受单元格约束的编辑器， 您必须通过在编辑器中实现 isPopup() 并返回 true 来指定编辑器是“弹出式”编辑器。

这方面的文档位于https://www.ag-grid.com/javascript-grid-cell-editing/#popup