Question

对于ag-grid，我在Angular上有以下代码：

.ts文件：

constructor(private myService: MyService) {
    this.defaultColDef = { resizable: true };
    this.getRowNodeId = data => data.id;
   }

  columnDefs = [
    {headerName: 'Edit', width: 55, resizable: false, cellRendererFramework: EditButtonComponent, cellRendererParams: { inRouterLink: 'editProject/' } },
    {headerName: 'Column 1', field: 'field_1', sortable: true, filter: true, unSortIcon: true },
    {headerName: 'Column 2', field: 'field_2', sortable: true, filter: true, unSortIcon: true  },
    {headerName: 'Column 3', field: 'field_3', sortable: true, filter: true, unSortIcon: true },
    {headerName: 'Column 4', field: 'field_4', sortable: true, filter: true, unSortIcon: true },
    {headerName: 'Column 5', field: 'field_5', sortable: true, filter: true, unSortIcon: true },
    {headerName: 'Column 6', field: 'field_6', sortable: true, filter: true, unSortIcon: true },
    {headerName: 'Column 7', field: 'field_7', sortable: true, filter: true, unSortIcon: true },
  ];


onGridReady(params) {
    params.api.sizeColumnsToFit();
  }

.html文件：

 <ag-grid-angular
          id="gridProject"
          style="width: 90%;"
          class="ag-theme-blue"
          domLayout='autoHeight'
          [rowData]="rowData" 
          [columnDefs]="columnDefs"
          [suppressMenuHide]="true"
          [defaultColDef]="defaultColDef"
          [getRowNodeId]="getRowNodeId" 
          (gridReady)="onGridReady($event)"
          alwaysShowVerticalScroll="false"
          suppressHorizontalScroll="false"
          rowSelection='single'>
      </ag-grid-angular>

当浏览器在Maximaze模式下第一顿午餐时，所有列均呈现为正常。

但是，当浏览器在“最小化”模式下午餐，然后单击“最大化”按钮时，浏览器将显示“最大化”，但列宽仍与“最小化”模式下相同。

最大化浏览器时如何让列自动调整大小？

顺便说一句，sizeColumnsToFit可以正常工作以适合整个网格宽度的列，但在最大化网格时不行。

Answer 1

您可以通过将ag-grid组件放入Flexbox容器中来实现上述目的。这将使您的网格可以根据浏览器或窗口以及网格父容器的任何更改相应地调整大小。

var cts = new CancellationTokenSource();
var task = RunAbortable(() => DoWork(foo), cts.Token);
task.Wait();

您可能已经注意到我们将<div style="display: flex; flex-direction: row"> <div style=" overflow: hidden; flex-grow: 1"> <ag-grid-angular id="gridProject" style="width: 90%;" class="ag-theme-blue" domLayout='autoHeight' [rowData]="rowData" [columnDefs]="columnDefs" [suppressMenuHide]="true" [defaultColDef]="defaultColDef" [getRowNodeId]="getRowNodeId" (gridReady)="onGridReady($event)" alwaysShowVerticalScroll="false" suppressHorizontalScroll="false" rowSelection='single'> </ag-grid-angular> </div> </div> CSS属性设置为overflow。这是因为ag-grid documentation指出

默认情况下，网格运行一个计时器，监视其容器大小并相应地调整用户界面的大小。这可能会干扰默认设置带有显示的元素的行为：弹性设置。简单的解决方法是添加溢出：隐藏到网格元素父级。

这里是demo。

最大化浏览器时自动调整ag-grid中的列大小

1 个答案: