Excel style filtering appears below another grid on the page

[DiyanDimitrov]

Description

If you have two grids on the page and you open the ESF of the first one, the ESF appears below the second grid. This issue is reported by a customer on the forums https://www.infragistics.com/community/forums/f/ignite-ui-for-angular/121530/error-excel-filter-overlay-on-second-gird.

• igniteui-angular version: 8.2.x
• browser: NA

Steps to reproduce

1. Open https://stackblitz.com/edit/angular-comusw
2. Open the ESF of the first grid.

Result

The ESF appears below the second grid.

Expected result

The ESF should appear above other components on the page.

Attachments

Attach a sample if available, and screenshots, if applicable.

[DiyanDimitrov]

@simeonoff, If we remove the z-index: 1; of the grid this issue is not reproducible. I don't recall why we have added it. Do we still need it?

[simeonoff]

@DiyanDimitrov we need the z-index set on the grid to create separate stacking contexts for all grids in the DOM. We have many sibling elements, direct descendants of the grid, that require specific stacking order to be set for them to render as they are intended, without overlapping one another. If we don't set z-index, other than auto, on the parent grid, its direct descendants will belong to a different stacking context and will be able to overlap elements outside the grid with lower z-index than them.

When you remove the z-index property from the grid, you alter the stacking context and now the grid overlays belong to a common stacking context, thus they are no longer bound by their parent grids and can overlap other elements in the DOM, like dialogs, dropdowns, etc., including, of course, other grids.

We cannot simply "remove" this style rule from the grid to fix one issue when so many other problems will be introduced. So no, this is not really a bug but a side effect of how the grid's stacking context works and the fact that the overlay, where the excel style filtering renders, is a descendant of the grid.

A real solution will be to use a different overlay outlet to render the Excel Style filtering or any other floating panes that you want to always appear on top.

[HugoScaramal]

Any other suggestion/workaround other than using z-index:auto?
I did try z-index:auto and as you mentioned, other issues came up.

[simeonoff]

@HugoScaramal well, if the target is to just take care of the excel-style filtering, then moving the filtering to an outlet outside the grid will solve the issue.

[HugoScaramal]

@simeonoff any chance you could share an example of how that could be achieved?

[DiyanDimitrov]

@HugoScaramal, we have discussed this issue and we have decided to expose a setter for the grid's outlet property. This way you will be able to provide an outlet that is outside the grids.