我在ag-grid中使用单元格渲染来编辑日期字段。在该单元格中,如图所示添加了datePicker
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> })尝试过z索引,它也无法正常工作。
Tried z index , it is also not working..
有人可以请se帮助我解决了这个问题?
Can anyone please help me to solve this ?
预先感谢您
推荐答案如前所述,要在单元格中使用 DatePicker ,您需要创建 cellEditor 而不是 cellRenderer ,但是, cellEditor 就像 cellRenderer 的扩展。
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.
因此,对于角度,您需要使用 ICellEditorAngularComp 接口并注意
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)别忘了返回 isPopup():boolean 方法中的true -用于正确的可见性。
don't forget to return true in isPopup(): boolean method - for correct visibility.
现在,关于DatePicker本身,我正在使用 @ danielmoncada / angular-datetime-picker
Now, about DatePicker itself, I'm using @danielmoncada/angular-datetime-picker
(但确保您可以使用任何东西)
还有一些需要注意的事情:
And there are a few things that you need to take care :
,可以使用 getValue 和 valueFormatter 方法
这仅是理论上的内容,请查看下面的演示并随意提问,将尝试
That's all for theory, check my demo below and feel free to ask anything related, will try to help.
演示
更多推荐
如何调整AG网格单元格渲染模板中的日期选择器视图?
发布评论