[Solved] Master detail grid with multiple menus overlap z-index problem

[Rob]

Hi all,

I am having a problem with multiple MVC Telerik Menus overlapping within a MVC Telerik Grid. In the screenshots, you can see that I am using a detail in the view which is another MVC Telerik Grid and it too has a column that uses a MVC Telerik Menu. What's happening is the menu in the detail view is having an overlap problem with the top level menu items in the parent Telerik Grid. I included both a screenshot of the overlap issue as well as what the menus look like when they are closed, and you can see that the two rows that have "Cancelled and "Placed" top level menus are bleeding through the detail menu when that menu is expanded.

I've tried to see about adding a class that increases z-index to 5000 to all menu items when a menu item opens and then removing that class from all menu items in the close event, but so far that hasn't been successful.

Is there any way to address this?

Note that there is no overlap when the parent row's menu overlaps a detail row's menu. It only happens when a detail row's menu opens on top of the parent row's menu (see menu fine no overlap screenshot).

Thanks,

Rob

[Daniel]

Hi Rob,

I managed to reproduce the overlapping of menus in hierarchical Grid scenario. At least on my side, the problem seems to occur only in older versions of Internet Explorer. I managed to fix this by raising the menu`s parent row  "z-index" when it opens and then returning it back to normal when it closes. For example :

function onOpen() {
  $(this).parents('.t-detail-row').css('z-index', +1000);
    }
function onClose() {
    $(this).parents('.t-detail-row').css('z-index', 'auto');
}

I hope this helps. if not, please send a sample project so we can check it.

Kind regards,
Daniel
the Telerik team