I have a Kendo Grid appearing in a modal successfully.
The filtering menus do not appear when clicking on the 3 dots in the column header.
It seems to be a layering issue. If I force change the z-index in dev tools the dropdown menu appears but then the filtering tools have issues. Has anyone else solved this problem?
3 Answers, 1 is accepted
Rank 1
Iron
Veteran
Iron
I partially fixed this issue by adding the css rule:
.k-animation-container { z-index: 100002}
but the input text boxes do not work. They do get focus, but cannot be typed into. They appear disabled.
Hello,
This is indeed caused by the stack over. The reason is that the Popup used for the Menu and its DropDownst inside has a default z-index of 100:
https://www.telerik.com/kendo-react-ui/components/popup/stack-order/
After I set the z-index to the higher than the Dialog, it was showing as expected and the inputs were editable:
https://stackblitz.com/edit/react-pmjgue?file=index.html
I hope this is helpful.
Regards,
Stefan
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.
Rank 1
Iron
Hi Sridevi,
We have introduced changes in our components and if the modal window or the popup is from the KendoReact suite, the z-index values will be automatically adjusted accordingly. As for the third-party modal components that force the focus to stay within the modal, disabling that option is the solution for allowing DropDownList (or any other component with a popup) to stay opened, because they need the focus to be able to move within the popup. Another option would be to render the popup within the modal (using the appendTo properties of the Popup).