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

Question

我已经尝试了几乎所有我知道的方法来让我的自定义下拉单元格渲染器显示为 agGrid 示例中的最顶部 div。我玩过 z-index，定位等，但没有运气。唯一做任何事情的是转到有问题的行之一并取消选择该行的转换，但随后该行就消失了。欢迎任何想法，提前致谢。

这是一个工作示例：https://stackblitz.com/edit/angular-ag-grid-hides-cellrenderer-5ryv9n

Quick screenshot of issue when menu is within ag-grid

Answer 1

我的解决方案是将 suppressRowTransform: true 添加到网格选项并使行和单元格具有 overflow: visible

虽然这是使用 ag-grid-react。

Answer 2

我也遇到了完全相同的问题（虽然是 ag-grid-react）。

这是我根据上面 Frank Wallis 的回答实施的有效解决方案： https://stackblitz.com/edit/react-z7aogy

为什么这样做有效？

cell renderer 比 ag-grid 更高 z-index（仅当菜单打开时）[因此它也必须有position，除了 'static']（见 ColorCell.js）

ag-grid cell样式包含：overflow: visible（参见style.css）

在网格选项中：suppressRowTransform=true（参见Table.js）

请注意，这并不完美。 当同时打开 2+ 个菜单时，一个隐藏另一个。这当然可以通过确保在任何给定时刻打开的菜单不超过 1 个来解决（就像常规 select 元素的行为一样）。

Answer 3

在 ag-grid-react 的最新版本中，在您的列定义中，您只需添加一个属性 'cellClass'，如下所示，该单元格的内容可能会溢出（为我工作工具提示):-

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

我提供了这个答案，以防像我这样的新手找到放置溢出的地方：可见。（基于以上答案）

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

ag-grid renders on top of cell renderer

html

css

ag-grid

angular