时间戳

首页 > 解决方案 > 剑道列过滤器内的角度材料日期选择器问题

angular - 剑道列过滤器内的角度材料日期选择器问题

问题描述

我有一个用于剑道网格列过滤器的模板，我在其中使用材料日期选择器来选择日期。

当剑道网格位于材质对话框内时发生的问题。

问题

正如您在图像上看到的，mat datepicker 出现在过滤器后面。发生这种情况是因为 mat-datepicker 对话框正在 cdk-overlay 中实例化，在包含网格的同一 div 中，因此它们共享相同的 Z-index。

检查员代码

kendo-grid 过滤器正在 app.component 中实例化。

检验员代码 2

我认为我们有两种可能的解决方案：在 cdk-overlay div 中实例化过滤器的 kendo-popup 或将 mat-datePicker 移动到具有更高 z-index 的 kendo-popup 旁边。

如果我使用 kendo-datepicker，则不会发生此问题，因为它在 kendo-popup 旁边实例化，但我需要 mat-datepicker 来满足设计要求。

检验员代码 3

提前致谢，

五

标签： angularkendo-uiangular-materialdatepickerkendo-grid

解决方案

我的问题在 Telerik 论坛中得到了回答。我必须将以下代码附加到网格的@Component。通过这个修改，当我在弹出窗口中使用我的网格时，剑道弹出窗口会在 cdk 覆盖中实例化。

providers: [
    {
      // Provide the current component element as Popup container.
      provide: POPUP_CONTAINER,
      useExisting: ElementRef,
    },
    // Create a new Popup Service that uses the provided container.
    PopupService,
  ],

推荐阅读