Kendo grid toolbar custom menu problem

1 Answer 62 Views
Grid Menu Toolbar
Matt
Top achievements
Rank 1
Matt asked on 10 Apr 2022, 05:49 PM | edited on 10 Apr 2022, 05:59 PM

Hello,

 

I'm using a kendoMenu item as a toolbar option in a kendo grid. This worked fine until one of the newer releases and the animated dropdown panel now shows behind the grid as shown here:

https://jsfiddle.net/k1d4aufr/

Previous versions of kendo did not have this problem:

https://jsfiddle.net/jddevight/Ltgvk2sf/

 

I've tried setting the z-index on the animated panel and nothing works. Any ideas?

 

Thanks,

 

Matt

 

1 Answer, 1 is accepted

Sort by
1
Georgi Denchev
Telerik team
answered on 13 Apr 2022, 11:25 AM

Hi, Matt,

Thank you for the provided code samples!

Since R1 2021 the Grid toolbar utilizes a flexbox. There were some additional modifications done to the toolbar rendering and styling as well. The problem occurs because the menu is rendered inside the toolbar which has an overflow property set to hidden. To overcome the issue, you can override the toolbar style and change the overflow to unset.

    <style>
      .k-toolbar {
        overflow: unset;
      }
    </style>

This should allow the container to display outside of the toolbar.

Runnable Dojo:

https://dojo.telerik.com/@gdenchev/oROzasaQ 

Let me know if you have any questions.

Best Regards,
Georgi Denchev
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.

Matt
Top achievements
Rank 1
commented on 14 Apr 2022, 07:12 PM

Thank you Georgi,

That fixed my problem. I didn't think of checking the overflow state of the toolbar.

Tags
Grid Menu Toolbar
Asked by
Matt
Top achievements
Rank 1
Answers by
Georgi Denchev
Telerik team
Share this question
or