Adding ngbDatepicker in agGrid - angular8

Question

I am trying to add ngbdatepicker in agGrid, but while adding the calender is coming inside the cell. I tried adding isPopUp as true but that is making the complete input oitside.
Here is the code I wrote:
{
headerName: 'Start Date',
field: 'paiStartDate',
width: 150,
editable: (params) => { return this.isEditiable(params); },
cellEditor: 'agDateInput',
},
this.components = { agDateInput: DatePickerComponent };
Here is my componenet html:
<div class="row">
<div class="col-md-12 col-lg-12">
<input data-input type="text" class="form-control" autocomplete="off"
[(ngModel)]="model" ngbDatepicker #d="ngbDatepicker" (click)="d.toggle()" placement="bottom-right"
(dateSelect) = "onDateSelect($event)"
size="13">
</div>
Here is the ts code:
export class DatePickerComponent implements OnInit, AgEditorComponent {
params: ICellEditorParams;
public selectedDate: Date = new Date();
model: NgbDateStruct;
#ViewChild('d') datePicker : ElementRef;
constructor() { }
ngOnInit() { }
getValue() {
return `${this.selectedDate.getDate()}/${this.selectedDate.getMonth() + 1}/${this.selectedDate.getFullYear()}`;
}
isCancelBeforeStart?(): boolean {
return false;
}
isCancelAfterEnd?(): boolean {
return false;
}
agInit(params: any): void {
this.params = params;
this.selectedDate = params.value;
}
onDateSelect(date:Date){
debugger;
this.selectedDate = date;
alert(this.selectedDate);
this.params.api.stopEditing();
}
isPopup(): boolean {
return false;
}
}
Please help as the calender here is opening inside of the input.

Answer 1

The issue here is that the popup element in rendering inside the cell. You will need to attach the popup element to the document body, to have it render as expected.
There is a blog post which addresses this which uses a different date picker component, but the concept remains the same for any date picker component: https://blog.ag-grid.com/using-third-party-datepickers-in-ag-grid/#appending-body
For your case, the easy way is to add [container]="'body'" to your input component. You can find this in the docs for component: https://ng-bootstrap.github.io/#/components/datepicker/api#NgbDate
<input data-input type="text" class="form-control" autocomplete="off"
[(ngModel)]="model" [container]="'body'" ngbDatepicker #d="ngbDatepicker" (click)="d.toggle()" placement="bottom-right"
(dateSelect) = "onDateSelect($event)"
size="13">