Kendo Grid in a modal: z-index problems

3 posts, 0 answers
  1. SoH
    SoH avatar
    9 posts
    Member since:
    Jun 2017

    Posted 18 May 2020 Link to this post

    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?

  2. SoH
    SoH avatar
    9 posts
    Member since:
    Jun 2017

    Posted 19 May 2020 in reply to SoH Link to this post

    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.

  3. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 19 May 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top