kendo datetimepicker is displaying behind dialog

1 Answer 39 Views
Date/Time Pickers
Jerry
Top achievements
Rank 1
Iron
Jerry asked on 09 Jun 2021, 01:21 PM

I am using the kendo-ui(2021.2.511) datetimepicker control in my Vuejs 2.x application.

The datetimepicker controls works when used on a page.

But when I use the datetimepicker in a v-dialog, and click the datetimepicker, the control displays behind the dialog for a moment then closes.

Has anyone seen this behavior? Is there a setting or work around to make the datetimepicker work correctly when used in a v-dialog?

 

1 Answer, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 14 Jun 2021, 09:55 AM

Hi Jerry,

I've just tested the reported behavior in this StackBlitz example that uses the Vuetify v-dialog as it is in your scenario. I am unable to reproduce the issue that you reported. Can you check the linked sample project and let me know if you can replicate the issue with the DateTimePicker's popup in it? 

If the issue is replicable in the linked example, can you share the steps for its reproduction? 

If the issue is not replicable, can you edit the sample project in a way it can be reproduced? Send me the edited project together with reproduction steps and I will check what could be triggerign the issue.

Last but not least, what I would suggest is to check and use our Window or Dialog components that have Vue Native and Vue Wrapper versions. These components are similar to the Dialog provided by Vuetify but their compatibility with the other Kendo UI for Vue components is tested. What I want to say here is that if you use our Dialog or Window components, you should not have any issues similar to the reported one.

Regards,
Petar
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Jerry
Top achievements
Rank 1
Iron
commented on 14 Jun 2021, 04:11 PM

Hello, I tried modifying your StackBlitz example but wasn't able to get my control to display. I must be missing a dependency.

This is the control that we are using <datetimepicker/> : https://www.telerik.com/kendo-vue-ui/components/dateinputs/datetimepicker/

It's different from the <kendo-datetimepicker/> in your example. But the StackBlitz example you gave is basically what we are trying to do.

Can you make this work correctly in the <v-dialog/> in your example? <datetimepicker/>
Petar
Telerik team
commented on 16 Jun 2021, 08:00 AM

Hi Jerry. 

Check this StackBlitz example. It uses the Native DateTimePicker component in  Vuejs 2.x context. 

To make the component's popup appear as expected, I've added the following CSS. Check the example and let me know if it helps you implement what you need.

.k-animation-container.k-animation-container-relative.k-datetime-container {
    z-index100000;
}
Venkat
Top achievements
Rank 1
commented on 20 Jul 2021, 11:04 AM | edited

Hi Petar,
Changing the z-index helps to bring the datetimepicker front and works fine. Its running into issue when 2 datetimepickers are used. The second datetime picker popup and hides immediately.

Please take a look at this StackBlitz example, where I have modified the earlier example with 2 controls
https://stackblitz.com/edit/b69i2m-p9oof2?file=index.html
Petar
Telerik team
commented on 23 Jul 2021, 07:29 AM

Hi Venkat,

Here is a StackBlitz example demonstrating how the targeted functionality can be implemented.

То achieve the demonstrated behavior, the retain-focus property of the Vuetify Dialog should be set to false.

Tags
Date/Time Pickers
Asked by
Jerry
Top achievements
Rank 1
Iron
Answers by
Petar
Telerik team
Share this question
or