ag-grid custom date component with ngx-boostrap

Question

I want to create my custom date filter with a nice datepicker. I added a custom date component as described here: https://www.ag-grid.com/javascript-grid-date-component

In this component I use ngx-bootstrap's BsDatepickerModule. The datepicker is showing and working.

The problem is, after selecting a date not just the datepicker is closed, the whole filter menu is closing. I want the user to press the apply filter first. This is especially troublesome for date ranges where the user has to enter two dates.

See the following plunker for demo: https://plnkr.co/edit/hM7uAZaadbjoGcXPRaDP

How can the filter menu be prevented from closing after selecting a date via BsDatepickerModule datepicker?

customDate.component.html

<div class="filter">
    <input type="text"
    #dp="bsDatepicker"
    bsDatepicker
    [bsValue]="date"
    [bsConfig]="{ dateInputFormat: 'DD.MM.YYYY' }">
</div>

customDate.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-customdatecomponent",
  templateUrl: "./customDate.component.html",
})
export class CustomDateComponent  {
  private date: Date;
  private params: any;

  agInit(params: any): void {
    this.params = params;
  }
  onResetDate() {
    this.setDate(null);
    this.params.onDateChanged();
  }
  onDateChanged(event) {
    this.params.onDateChanged();
  }
  getDate(): Date {
    return this.date;
  }
  setDate(date: Date): void {
    this.date = date;
  }
}

Answer 1

Since I wasn't able to find any other solutions to this problem on SO, I want to provide my solution to this problem.

What's happening is that when you click the datepicker popup, its creating the element outside of the context of ag-grid's pop-up service. Since the datepicker element is not within the pop-up service's current context, clicking the datepicker means ag-grid thinks you clicked outside of the filter and that you want to close the filter pop-up.

To solve the problem, you want to add an event handler for onShown to the datepicker to add the component to ag-grid's pop-up service.

customDate.component.html

<div class="filter">
    <input type="text"
           #dp="bsDatepicker"
           bsDatepicker
           [bsValue]="date"
           (onShown)="addDatepickerToAgGridContext($event)"
           [bsConfig]="{ dateInputFormat: 'DD.MM.YYYY' }">
</div>

Then, in the event handler, you simply navigate to the popupService in the API that is available to you in your params and add the datepicker to the list of active elements. In our case, the datepicker is instantiated in a tag bs-datepicker-container, so you want to use JS to select that element, then add it to the array.

addDatepickerToAgGridContext(e){
    this.params.api.gridCore.popupService.activePopupElements.push(document.getElementsByTagName("bs-datepicker-container")[0]);
}

Note on later versions of ag-grid (I'm now on "ag-grid-community": "22.0.0"), the path to the list of active popup elements has changed. The active popup elements is now stored in the array at api.gridCore.popupService.popupList.

addDatepickerToAgGridContext(e){
    this.params.api.gridCore.popupService.popupList.push(
       {element: document.getElementsByTagName("bs-datepicker-container")[0]}
    );
}

Answer 2

For "ag-grid-community": "25.0.0" you can resolve the problem adding filterParams inside "params":

addDatepickerToAgGridContext(e) {
    this.params.filterParams.api.gridCore.popupService.popupList.push(
      { element: document.getElementsByTagName("bs-datepicker-container")[0] }
    );
  }

Answer 3

You will probably need to develop a custom component that incorporates BS date picker in a popover with Apply button. In one of my project, we had a custom datepicker component to use in ag-grid that incorporated ng-bootstrap date picker on a popover (no apply button) with a few customization options. However, it was a non-trivial effort and the component took sometime to become production ready.

Answer 4

For "ag-grid-community": "25.3.0"

addDatepickerToAgGridContext(e){
    // @ts-ignore
    this.params.api.gridCompController.popupService.popupList.push(
       {element: document.getElementsByTagName("bs-datepicker-container")[0]}
    );
}