CODEWITHSUNDEEP
angular8ag-gridng-bootstrap
Abinit Varma
Abinit Varma

Reputation: 11

Adding ngbDatepicker in agGrid

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.

Upvotes: 0

Views: 737

Answers (1)

Shuheb
Shuheb

Reputation: 2352

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">

Upvotes: 1

Related Questions