ag-grid V19 hidden / closed tool panel by default

Question

I am using the follwoing dependencies:

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

After migrating to version 19 the new sidebar was hidden. This could be fixed by setting [sideBar]="'columns'".

But the tool panel section is always open. I could close it by calling gridApi.closeToolPanel(), but in this case you see the open toolPanel for a short moment if you load the page. Is there an option to show only the side bar buttons and hide the toolPanel by default (as it was in version 18)?

Answer 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: ''
    }
};

The defaultTooPanel: '' is what tells ag-grid what should be opened by default. You can set it to blank or null and that will it cause it to not open any toolPanel by default.

Note: in version 19.0.0, you will get a console.log warning about this. In 19.1.1, you will not get the warning.

Answer 2

To keep the ToolPanel closed by default, you need to set the defaultToolPanel to an empty string value.

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

This is as the default value for defaultToolPanel is columns.