有没有办法在ag-grid中将detailRowHeight道具设置为100％？

Question

最近开始研究一个主要的细节结构的角网格。该结构具有两个级别的主从细节嵌套。我需要固定内部的高度-2个网格，使它们占据屏幕上所有可用的空间。当前，ag-grid默认将其设置为300 px，并且1920x1200屏幕分辨率监视器上会出现很多空白或未使用的空间。我还需要为所有网格设置固定的标题。

任何想法或指点将不胜感激...

更新：这里引用了来自ag-grid的示例代码的分支版本-https://next.plnkr.co/edit/yUzo4EqONEmgCmIw这是针对主从网格的简单而基本的设置。

请注意：我尚未设置任何明细行高度，并且只设置了一条记录显示在网格中以测试问题。

如果运行插入代码并在单独的窗口中查看结果，请注意内部/子网格不会占据其下方的所有可用空间。换句话说，它所占用的空间/高度不超过父容器（主数据明细行）中的可用空间/高度。默认的300px主detailRowHeight使内部网格的高度固定。另外，从文档中可以看到，detailRowHeight道具似乎并没有像100％或100vh这样的东西，只需要固定的像素数。添加了以下示例的图片以及我引用的高度/未使用空间

我们有不同的分辨率，用户可使用这些分辨率查看网格中的数据，并且内部网格的高度需要自动调整，以最大值为准。可用空间以在网格中显示大多数信息。

Answer 1

因此，对于您来说，我没有一个很好的完整解决方案，但作为起点，我将使用CSS覆盖ag-grid设置的样式-我认为detailRowHeight不会有所帮助。

在这里，我用index.html中放置的一些简单CSS接近了您想要的东西。您可以使用！important覆盖ag-grid样式，也可以在ag-grid之后使用JavaScript设置CSS。在这种情况下，我更喜欢！important，不必担心时间安排。 https://next.plnkr.co/edit/mmXBBJE5Wa1JrX7v

我要解决的问题是让它动态填充可用空间，具体取决于所选的行，滚动位置等。我想不出任何简单的方法来实现这一目标-我做到了网格中事物的类型通常会最终编写JavaScript以计算可用空间，然后在javascript中设置CSS。

Answer 2

您可以尝试这样的操作，我从文档中将其删除：

在您的component.ts文件中添加此方法。如果是明细行，它将应用与其他行不同的计算。

  public rowHeight(params) {
        if (params.node && params.node.detail) {
            var offset = 80;
            var allDetailRowHeight = params.data.callRecords.length * 28;
            return allDetailRowHeight + offset;
        } else {
            // otherwise return fixed master row height
            return 25;
        }
    };

在模板中添加以下内容：[getRowHeight]="rowHeight"

<ag-grid-angular
  #agGrid
  style="width: 100%; height: 100%;"
  id="myGrid"
  class="ag-theme-balham"
  [columnDefs]="columnDefs"
  [masterDetail]="true"
  [detailCellRendererParams]="detailCellRendererParams"
  [getRowHeight]="rowHeight"
  [rowData]="rowData"
  (gridReady)="onGridReady($event)"
></ag-grid-angular>

希望这会让您前进。祝你好运！

https://www.ag-grid.com/javascript-grid-master-detail/#detail-row-height