对于不起作用的列，ag grid sizeColumnsToFit

Question

我使用ag-grid ng2并尝试应用sizeColumnsToFit。例如：如果有4列，则应自动调整大小并使其适合网格宽度。 gridOptions.api.sizeColumnsToFit（）不起作用。

var gridOptions = {
    columnDefs: columnDefs,
    rowData: null,
    enableColResize: true
};

this.columnDefs = [
     {headerName: "Age", field: "age", width: 90, minWidth: 50, maxWidth: 100},
    {headerName: "Country", field: "country", width: 120},
    {headerName: "Year", field: "year", width: 90},
    {headerName: "Date", field: "date", width: 110}


    ];

 gridOptions.api.sizeColumnsToFit();

Answer 1

试试这段代码..同时为所有字段定义columnDefs set suppressSizeToFit：false，

this.columnDefs = [
 {headerName: "Age", field: "age", width: 90, minWidth: 50, maxWidth: 100,suppressSizeToFit: false},
 {headerName: "Country", field: "country", width: 120,suppressSizeToFit: false},
 {headerName: "Year", field: "year", width: 90,suppressSizeToFit: false},
 {headerName: "Date", field: "date", width: 110,suppressSizeToFit: false}
 ];

然后在onGridReady中使用下面的代码。

onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;   
params.api.sizeColumnsToFit(); 
}

Answer 2

保持容纳AgGrid的容器的宽度小于100％对我来说是个窍门。

Answer 3

在呈现数据时调整列的大小在两种情况下，您可能希望根据网格数据调整列的大小：

1. 行数据在网格初始化时可用
2. 在网格初始化之后，行数据可用，通常是在通过服务器调用异步设置数据之后

在第一种情况下，您可以在gridReady或firstDataRendered事件中触发autoSizeColumns（），因为在网格准备好之前将呈现行数据。

但在第二种情况下，您只能可靠地使用firstDataRendered，因为在网格准备好之后，行数据将可用，并因此呈现。

https://www.ag-grid.com/javascript-grid-resizing/