Ag grid ngbdatepicker datepicker - calendar rendering inside cell

To render the NgbDatepicker calendar outside the Ag Grid cell, we need to modify the code structure. Here's an example of how you can achieve this:

In this example, we define a template named "datePickerTemplate" that contains the input element and the NgbDatepicker component. We then use this template in the Ag Grid column definition by setting the "cellRendererFramework" property to a custom cell renderer component called "DateCellRenderer".

The "DateCellRenderer" component will render the "datePickerTemplate" for each cell in the "Date" column. This way, the NgbDatepicker calendar will be rendered outside the cell, providing a better user experience.

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

manikandan r2y ago
this is not working
Jayraj Chhaya2y ago
To render the NgbDatepicker calendar outside the Ag Grid cell, we need to modify the code structure. Here's an example of how you can achieve this:
```
  
  



  
```
In this example, we define a template named "datePickerTemplate" that contains the input element and the NgbDatepicker component. We then use this template in the Ag Grid column definition by setting the "cellRendererFramework" property to a custom cell renderer component called "DateCellRenderer".

The "DateCellRenderer" component will render the "datePickerTemplate" for each cell in the "Date" column. This way, the NgbDatepicker calendar will be rendered outside the cell, providing a better user experience.