Kendo grid toolbar custom menu problem

[Matt]

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

 

[Georgi Denchev]

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

[Matt]

Thank you Georgi,

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