【问题标题】:How to adjust datepicker view inside ag grid cell render template?如何在 ag 网格单元格渲染模板中调整 datepicker 视图?
【发布时间】:2020-07-07 23:53:04
【问题描述】:

我在我的 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 ,它也不起作用..

谁能帮我解决这个问题?

提前谢谢你

【问题讨论】:

  • 你能创建一个 stackblitz 演示吗?

标签: angular8 ag-grid


【解决方案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. 您将用于视图和数据库的值类型

可以使用getValuevalueFormatter 方法处理

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

DEMO

【讨论】:

    【解决方案2】:

    两件事...

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

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

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

    【讨论】:

    • 感谢先生花费您宝贵的时间。我已经在单元格编辑器中尝试过日期选择器,但它没有用,这就是我进行单元格渲染的原因..我会再试一次,如果不清除我的问题意味着将提供一个演示代码...:)
    • 顺便说一下,在我的项目中,我们从来没有让日期选择器在网格中正常工作,只是选择了一个自定义日期编辑器,它是一个带掩码的输入字段。如果您想要该代码,请告诉我。
    • 你能分享那个代码吗?对我有帮助。..
    • 我把相关代码贴在github.com/rfreedman/ag-grid
    猜你喜欢
    • 2020-03-11
    • 2021-08-31
    • 1970-01-01
    • 1970-01-01
    • 2019-01-13
    • 2018-02-13
    • 2017-06-11
    • 2018-09-06
    • 2021-03-13
    相关资源
    最近更新 更多