ag Grid：如何在将它们拖到行组面板后禁用隐藏不可分组的列？

Question

我有一个 angular 应用程序，我正在向其中添加 agGrid table。我将 table 配置为允许按如下方式对行进行分组：

  <ag-grid-angular
    [columnDefs]="columnDefs"
    [rowData]="activeMethods"
    [groupDefaultExpanded]="-1"
    [rowGroupPanelShow]="'always'"
  >
  </ag-grid-angular>

并且我将一些列设置为可分组，如下所示：

    enableRowGroup: true,
    enablePivot: true,

这显示了行组面板并允许对我拖入其中的列进行分组，但问题是我拖入面板的“不可分组”列被隐藏了。我需要将这些列拖到那里时不要隐藏。我知道 suppressDragLeaveHidesColumns 参数在将任何列从 table 拖开时禁用隐藏任何列，但我希望“可分组”列在拖动到组面板时仍然隐藏。我想实现的目标容易实现吗？

Answer 1

您可以保留 suppressDragLeaveHidesColumns 以防止非分组列在拖到网格外时被隐藏，然后利用网格事件 columnRowGroupChanged 将正在分组的列更改为隐。您可以找到 documentation for this here.

在版本 24 中，这可以使用列 API 方法 applyColumnState 轻松实现，有关 this can be found here

的文档

综合起来：

  onColumnRowGroupChanged(params) {
    let columnStateParams = [];

    params.columns.forEach(col => {
      columnStateParams.push({ colId: col.getColId(), hide: true });
    });

    params.columnApi.applyColumnState({
      state: columnStateParams,
    });
  }

我创建了一个Plunker showing this

只能对 Year 和 Country 列进行分组，不能对 Athlete 和 Age 列进行分组。

ag Grid：如何在将它们拖到行组面板后禁用隐藏不可分组的列？

agGrid: how to disable hiding ungroupable columns after dragging them to the row group panel?

ag-grid

ag-grid-angular