1. Feedback
  2. React
  3. 62568

Welcome to the React feedback portal. We’re happy you’re here! If you have feedback on how to improve the React, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

Column menu doesn't show if grid placed in DialogComponent that has target that isn't body and isn't first

I have an app page that has multiple instances of DialogComponent rendered on it, initially set to be not visible, and they have a target set of the app root container. In at least one of the dialogs (not the first rendered) is a grid which has columnmenu injected and enabled.

If I click a button to make the dialog containing the grid visible the grid renders ok. But clicking on the column header 3 dot icon to show the column menu appears to do nothing - in actual fact the column menu is being rendered but the zindex being set on it is too low so the browser renders it behind the dialog the grid is on.

I have created an example here - try clicking on the triple-dots to show the column menu and you'll note it doesn't appear (but if you inspect the DOM you can see that the column menu wrapper element is there and the column menu is there, but its z-index is too low for it to be visible).

This problem does not occur if the grid is in the first dialog (but I think that's luck and just because the popups happen to have the same z-index) and it's not an issue if no target is set on the dialogs (I think this is because the context menu and the dialog popups are ending up under the body, the default target).

Note that all the dialogs in my app are targeted to go under the app root element to avoid this issue with click handling in React which I reported previously.