Problem with matdatepicker in kendo grid filter

[Víctor]

Hi,

I have a template for a kendo grid column filter where I use a material datepicker to select a date. 

The issue that is happening when the kendo grid is located inside a material Dialog. 

 

As you can see on the screen, the mat datepicker is appearing behind the filter. That happens because the mat-datepicker dialog is being instantiate in the cdk-overlay, in the same div that contains the grid, so they share the same Z-index.

And the kendo-grid filter is being instantiated inside the app.component. 

I think that we have two possible solutions: instantiate the filter's kendo-popup inside the cdk-overlay div or move the mat-datePicker next to the kendo-popup with a higher z-index.

If I use a kendo-datepicker this issue doesn't happens because it is instantiate next to the kendo-popup but I need the mat-datepicker for designs requirements. 

 

Thanks in advance,

V

[Víctor]

Hi. Any update about this?

[Yanmario]

Hi Victor,

Thank you for the provided screenshots.

Indeed the issue seems to be caused in the DOM where different containers are initialized with their corresponded z-index. I recommend using Kendo UI for Angular DatePicker component and adjusting the styles depending on the application requirements(Kendo Material theme can be used).

https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/

What else can be done is to use the popup container to overlay other applications:

https://www.telerik.com/kendo-angular-ui/components/grid/how-to/scope-grid-popups/

https://stackblitz.com/edit/ng-kendo-grid-filter-menu-mat-datepicker-9rjzkd?file=app%2Fapp.component.ts

I want to mention that mat-dialog and mat-datepicker aren't supported components by Kendo UI for Angular and they have their own documentation and dedicated support. This recommendation(with the demo example) should be used at the developer's own discretion as it's based on a custom implementation.

I hope this helps and steers you in the right direction.

Regards,
Yanmario Menev
Progress Telerik

[Víctor]

Thank you very much. It works like a charm.

Now the kendo-popup is instantiated correctly in the cdk-overlay when I use the grid in a popup. :D