Menu on hover loses grid row hover

1 Answer 66 Views
Grid Menu Styling
Sanja Tolo
Top achievements
Rank 1
Iron
Iron
Sanja Tolo asked on 04 Oct 2023, 10:57 AM

Hello,

we have a use case where our actions column are hidden in grid because they are extra actions and there can be a lot of them, so we decided that we want to show them only when you hover over a row and show actions for that specific row. One of these actions is Menu where the parent is icon with vertical dots. When we hover over it shows menu items correctly, but when we hover one of the items the row loses hover and actions get hidden again even tho the popup is still open. 

The problem is because the popup opens in a portal outside of root, and it is separated from the grid altogether.

Here is simple reproducible issue demo with parent dissapearing when hover over menu items: Demo of the issue

Ideally we would like the row and actions to stay open in grid on that specific row and only close when we leave row and popup.
We tried implementing openPopupOnClick prop but it was worse user experience and still issue with hover after the first time.

Thank you for your help!

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 06 Oct 2023, 08:05 AM

Hi Sanja,

Thank you for reaching out to us.

You can use the PopupPropsContext (https://www.telerik.com/kendo-react-ui/components/popup/global-context/) for changing the appendTo of the Menu popups to be within the row:

Please give this a try and let us know if the result meets your requirements. 

 

Regards,
Konstantin Dikov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Sanja Tolo
Top achievements
Rank 1
Iron
Iron
commented on 09 Oct 2023, 10:35 AM

Hello,

After trying out a few things regarding your suggestion we have managed to achieve desired solution. We also needed to update current package versions.

Thank you for your help!
Best regards
Tags
Grid Menu Styling
Asked by
Sanja Tolo
Top achievements
Rank 1
Iron
Iron
Answers by
Konstantin Dikov
Telerik team
Share this question
or