带有 ngx-boostrap 的 ag-grid 自定义日期组件

Question

我想用一个漂亮的日期选择器创建我的自定义日期过滤器。我添加了一个自定义日期组件，如下所述：https://www.ag-grid.com/javascript-grid-date-component

在这个组件中，我使用了 ngx-bootstrap 的 BsDatepickerModule。日期选择器正在显示和工作。

问题是，选择一个日期后，不仅日期选择器关闭了，整个过滤器菜单也关闭了。我希望用户先按应用过滤器。这对于用户必须输入两个日期的日期范围尤其麻烦。

请参阅以下 plunker 进行演示： https://plnkr.co/edit/hM7uAZaadbjoGcXPRaDP

BsDatepickerModule datepicker选择日期后如何防止过滤菜单关闭？

自定义日期.component.html

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

自定义日期.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

编辑 04/26/2023：在更高版本的 ag-grid 上（我使用的是 ag-grid v25），此过程已大大简化。根据文档here,

• 将

  ag-custom-component-popup

  CSS 类添加到您的浮动元素。

对于给定的 bsDatepicker 示例，我们可以执行以下操作...

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

（以下为原回复）

因为我在 SO 上找不到这个问题的任何其他解决方案，所以我想提供我对这个问题的解决方案。

发生的事情是，当您单击日期选择器弹出窗口时，它会在 ag-grid 弹出服务的上下文之外创建元素。由于 datepicker 元素不在弹出服务的当前上下文中，因此单击 datepicker 意味着 ag-grid 认为您在过滤器之外单击并且您想关闭过滤器弹出窗口。

为了解决这个问题，你想为日期选择器添加

onShown

的事件处理程序，以将组件添加到ag-grid的弹出服务。

自定义日期.component.html

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

然后，在事件处理程序中，您只需导航到

params

中可用的 API 中的 popupService，并将日期选择器添加到活动元素列表中。在我们的例子中，日期选择器是在标签

bs-datepicker-container

中实例化的，因此您想使用JS选择该元素，然后将其添加到数组中。

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

注意 ag-grid 的更高版本（我现在在

"ag-grid-community": "22.0.0"

），活动弹出元素列表的路径已经changed。活动弹出元素现在存储在

api.gridCore.popupService.popupList

.

的数组中

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

Answer 2

对于

"ag-grid-community": "25.0.0"

，您可以解决在“params”中添加filterParams的问题：

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

Answer 3

您可能需要开发一个自定义组件，该组件将 BS 日期选择器合并到带有“应用”按钮的弹出窗口中。在我的一个项目中，我们有一个在 ag-grid 中使用的自定义日期选择器组件，它在弹出窗口（无应用按钮）上集成了 ng-bootstrap 日期选择器，并带有一些自定义选项。然而，这是一项非常重要的工作，该组件需要一些时间才能投入生产。

Answer 4

对于

"ag-grid-community": "25.3.0"

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