Kendo Grid in a modal: z-index problems

[SoH]

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?

[SoH]

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.

[Stefan]

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

[Sridevi]

Anyone still running into this problem in 2023, for later versions of bootstrap, can try to use data-bs-focus="false", in your bootstrap modal dialog, holding the kendo grid. This is the fix that solved our issue.

[Konstantin Dikov]

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).