Ag网格sizecolumnStofit用于柱不起作用

Question

我已经使用了ag-rid 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设置suppressizetofit：forse for All字段，

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

保持包含敏捷的容器的宽度对我来说是障碍的。

Answer 3

呈现数据时调整列在两个方案中，您可能需要根据网格数据调整列的情况：

：

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

在第一种情况下，您可以在GridReady或第一个Datarendered事件中启动AutoSizeColumns（），因为该行数据将在电网准备就绪时呈现。

在第二种情况下，您只能可靠地使用第一个datarender，因为将可用行数据可用，因此呈现网格准备就绪后进行渲染。

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

Answer 4

您需要为columnApi.autoSizeColumns()提供所有列ID的列表：

function onFirstDataRendered (params) {
  params.api.sizeColumnsToFit()
  window.setTimeout(() => {
    const colIds = params.columnApi.getAllColumns().map(c => c.colId)
    params.columnApi.autoSizeColumns(colIds)
  }, 50)
}
…
<AgGridReact onFirstDataRendered={onFirstDataRendered} … />
… 

Answer 5

我实现了可重复使用的Ag-Grid React包装器组件，该组件将调整其列大小以自动适合其容器的宽度。它观看其容器的宽度并听到window.resize事件，然后在需要时在useEffect中调用gridApi.sizeColumnsToFit()。如果有兴趣，请在此处以步骤阅读代码，或在CODESANDBOX的工作示例中查看所有代码。

Answer 6

import { FirstDataRenderedEvent } from '@ag-grid-community/core';
 public onFirstDataRedndered(event: FirstDataRenderedEvent){
    event.api.sizeColumnsToFit();
 }