ag-grid V19 默认隐藏/关闭工具面板答案

【问题标题】：ag-grid V19 hidden / closed tool panel by defaultag-grid V19 默认隐藏/关闭工具面板
【发布时间】：2021-10-01 18:38:53
【问题描述】：

我正在使用以下依赖项：

"dependencies": {
   "ag-grid-community": "19.0.0",
   "ag-grid-angular": "19.0.0",
   "ag-grid-enterprise": "19.0.0",
}

迁移到版本 19 后，新的侧边栏被隐藏了。这可以通过设置 [sideBar]="'columns'" 来解决。

但工具面板部分始终处于打开状态。我可以通过调用 gridApi.closeToolPanel() 来关闭它，但在这种情况下，如果您加载页面，您会在短时间内看到打开的 toolPanel。是否可以选择仅显示侧边栏按钮并默认隐藏工具面板（就像在版本 18 中一样）？

【问题讨论】：

标签： ag-grid

【解决方案1】：

var gridOptions = {    
sideBar: {
    toolPanels: [
            {
                id: 'columns',
                labelDefault: 'Columns',
                labelKey: 'columns',
                iconKey: 'columns',
                toolPanel: 'agColumnsToolPanel',
                toolPanelParams: {
                    suppressValues: true,
                    suppressPivots: true,
                    suppressPivotMode: true,
                    suppressRowGroups: false
                }
            },
            {
                id: 'filters',
                labelDefault: 'Filters',
                labelKey: 'filters',
                iconKey: 'filter',
                toolPanel: 'agFiltersToolPanel',
            }
        ],
        defaultToolPanel: ''
    }
};

defaultTooPanel: '' 告诉 ag-grid 默认应该打开什么。您可以将其设置为空白或 null，这将导致它默认不打开任何工具面板。

注意：在 19.0.0 版本中，您将收到关于此的 console.log 警告。在 19.1.1 中，您不会收到警告。

【讨论】：

非常有帮助。谢谢！

【解决方案2】：

To keepToolPanel默认关闭，需要将defaultToolPanel设置为空字符串值。

        sideBar: {
            toolPanels: [
                {
                    id: "columns",
                    labelDefault: "Columns",
                    labelKey: "columns",
                    iconKey: "columns",
                    toolPanel: "agColumnsToolPanel",
                },
                {
                    id: "filters",
                    labelDefault: "Filters",
                    labelKey: "filters",
                    iconKey: "filter",
                    toolPanel: "agFiltersToolPanel",
                },
            ],
            defaultToolPanel: "",
        }

这是因为defaultToolPanel 的default 值是columns。

【讨论】：

【解决方案3】：

这取决于你打电话给gridApi.closeToolPanel()的确切位置。

检查this plunk I've created。这是角度的，但我希望你能理解。

调用onGridReady里面的函数。

onGridReady(params) {
  this.gridApi = params.api;
  this.gridApi.closeToolPanel();
}

另一个类似的问题：On upgrade ag-grid version 19 from version 9, on right click tool panel option is not coming.

【讨论】：

【解决方案4】：

由于某些原因 this.gridApi.closeToolPanel() 始终无法正常工作，但我尝试使用以下方法破解它：

onGridReady(params) {
  this.gridApi = params.api;
  settimeout(() => { this.gridApi.closeToolPanel()},100)
}

【讨论】：