ag-grid 渲染器在单元格渲染器之上。

Question

我已经尝试了我所知道的所有方法来使我的自定义下拉框单元格呈现为agGrid示例中的最顶层div。我尝试使用z-index，定位等方法，但都没有成功。唯一起作用的是去除一个有问题的行的变换选择，但是这样做会导致该行消失。欢迎提出任何想法, 谢谢。

这是一个可行的例子：https://stackblitz.com/edit/angular-ag-grid-hides-cellrenderer-5ryv9n 菜单在ag-grid内部时出现问题的快照

- Daryl P

Answer 1

对于我来说解决方案是在网格选项中添加 suppressRowTransform: true 并且让行和单元格具有 overflow: visible

虽然这是使用 ag-grid-react 实现的。

- Frank Wallis

---

非常感谢。这个解决方案帮了我很多！我为这个问题挣扎了一个星期。 - S K R

感谢Frank提供的解决方案。它确实有所帮助，但是在将suppressRowTransform: true添加到网格选项时，我遇到了另一个问题。问题是，当我们从行的下拉列表中选择任何值（该值从行之外填充）时，悬停状态不会停止。行仍处于悬停状态（颜色更改），直到再次悬停为止。即使在https://stackblitz.com/edit/react-z7aogy中也可以复制此操作。请帮助我解决这个问题。 - suvalakshmi

Answer 2

我也遇到了完全相同的问题（不过是在ag-grid-react中）。

以下是我实现的可行解决方案，遵循了Frank Wallis上面的答案：https://stackblitz.com/edit/react-z7aogy

为什么这个方案有效呢？

1. 单元格渲染器比ag-grid更高的z-index（只有当菜单打开时）[因此它还必须具有position，而不是“static”]（请参见ColorCell.js）

2. ag-grid单元格样式包含：overflow: visible（请参见style.css）

3. 在gridOptions中：suppressRowTransform=true（请参见Table.js）

请注意，这并不完美。当同时打开2个或更多菜单时，一个会隐藏另一个。当然，可以通过确保任何给定时刻最多只有1个菜单处于打开状态（就像常规选择元素一样）来解决这个问题。

- yagiro

---

唉，这并没有解决我的问题，我的问题是我在一个小网格中有一个很长的值列表，而该列表位于网格的边缘下方。在ColorCell.js中，尝试将其从Array（3）更改为Array（30），你就会明白我的意思了。 - Steve Schmitt

Answer 3

在最近的ag-grid-react版本中，您可以在列定义中添加一个名为“cellClass”的属性，如下所示，该单元格的内容可以溢出（对我来说使用工具提示很好用）：

  columnData = [
{
  headerName: 'Column Name',
  field: 'colId',
  width: 260,
  suppressRowTransform: true,
  cellClass: 'overflow-visible'}]

我提供这个答案是为了帮助像我一样的新手找到放置overflow: visible的位置。(基于上面的答案)

- Jolly Good