Ag Grid：在Chrome / IE 11中运行时自适应列宽度无法正常工作

Question

我在angular框架中使用Ag grid。在初始数据加载后，动态应用了行分组，然后尝试展开所有分组以及对列进行自适应大小处理以避免显示省略号（value...）。

在下面的plunker中，我重现了这个问题。我发现，在分组之后，我使用setTimeout函数来展开/折叠或自适应列宽可以解决问题。

Autosize columns plunker using hack setTimeout, check app.component.ts file

我不想使用这种hacky方式，因为我不知道确切的行数，所以在某些情况下，setTimeout将不起作用。

此外，在IE11中速度非常慢，可能需要更长的timeout值。

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

    this.http
      .get(
        "https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json"
      )
      .subscribe(data => {
        data[0].athlete = 'very very very long text very very very long text very very very long text very very very long text'
        this.rowData = data;
         this.gridColumnApi.addRowGroupColumns(["sport", "year", "country", "athlete"]);

        // This will not work
        // this.setDefaultExpanded();

        // This will work (hacky solution)
        setTimeout(() => {
          this.setDefaultExpanded();
        }, 1000);

        // This will not work
        // this.autoSizeAll();

        // This will work (hacky solution) 
        setTimeout(() => {
           this.autoSizeAll();
        }, 2000);

      });
  }



 setDefaultExpanded() {
    this.gridApi.forEachNode(node => {
        if (node.group) {
            node.expanded = true;
          }
        });
        this.gridApi.onGroupExpandedOrCollapsed();
  }


  autoSizeAll() {
      const allColumnIds = [];
      if (this.gridColumnApi) {
        this.gridColumnApi.getAllDisplayedColumns().forEach(column => {
          allColumnIds.push(column.colId);
        });
        this.gridColumnApi.autoSizeColumns(allColumnIds);
      }

  }

希望能得到任何帮助！！！

谢谢。

- shreyansh

---

尝试在代码中使用setTimeout：setTimeout(function(){ this.gridColumnApi.autoSizeColumns(allColumnIds);},200) - Jayakumar Thangavel

我以前工作时遇到类似问题时会使用超时函数，但我不确定这是否是一个好的做法。请确认它是否有效。 - Jayakumar Thangavel

谢谢您的回复，但我已经尝试过了，而且我不想使用这个hack（setTimeout）。 - shreyansh

Answer 1

请使用onFirstDataRendered事件。这将在数据加载到网格后触发。

var gridOptions = {
    defaultColDef: {
        resizable: true
    },
    columnDefs: columnDefs,
    rowData: null,
    onFirstDataRendered: onFirstDataRendered
};

function onFirstDataRendered(params) {
    const allColumnIds = [];
  if (this.gridColumnApi) {
    this.gridColumnApi.getAllDisplayedColumns().forEach(column => {
      allColumnIds.push(column.colId);
    });
    this.gridColumnApi.autoSizeColumns(allColumnIds);
  }
}

- Jayakumar Thangavel

---

我尝试了ag grid的几乎所有事件，包括firstDataRendered、modelUpdated、rowDataChanged和rowDataUpdated。问题在于autosize在展开/折叠操作之前被调用，因为它是forEachNode的异步回调。而且在我的情况下，网格每5秒刷新一次，所以在这些事件上执行autosize会更加昂贵。 - shreyansh

抱歉，我找不到解决方法。您可以在Github的问题中发布。 - Jayakumar Thangavel

当然会联系Ag Grid社区，但感谢您的回复。 - shreyansh