ag-Grid: попытался вызвать sizeColumnsToFit (), но сетка возвращается с нулевой шириной, возможно, сетка еще не видна на экране? - PullRequest
Новая
       243

ag-Grid: попытался вызвать sizeColumnsToFit (), но сетка возвращается с нулевой шириной, возможно, сетка еще не видна на экране?

0 голосов
/ 07 мая 2020 
 # in html xyz.commponent.tz

<tabset #staticTabs>
    <tab heading="User">
      <ag-grid-angular
        style="width: 100%; height: 500px;"
        class="ag-theme-material"
        [rowData]="rowData"
        [columnDefs]="columnDefs"
        [gridOptions]="gridOptions"
      >
      </ag-grid-angular>
    </tab>
    <tab heading="Whitelisted User" >
      <ag-grid-angular
        style="width: 100%; height: 500px;"
        class="ag-theme-material"
        [rowData]="rowData1"
        [columnDefs]="columnDefs1"
        [gridOptions]="gridOptions"
      >
      </ag-grid-angular>
    </tab>
    <tab heading="Blacklisted User">
      <ag-grid-angular
        style="width: 100%; height: 500px;"
        class="ag-theme-material"
        [rowData]="rowData2"
        [columnDefs]="columnDefs2"
        [gridOptions]="gridOptions"
      >
      </ag-grid-angular>
    </tab>

  </tabset>
#in xyz.component.ts
constructor() {
this.gridOptions = {
  onGridReady: () => {
    this.gridOptions.api.sizeColumnsToFit();
  },
};}

Я хочу изменить размер всех трех элементов сетки, но размер ни у кого не изменился. он не выдает ошибки в консоли, но показывает этот ag-Grid: пытался вызвать sizeColumnsToFit (), но сетка возвращается с нулевой шириной, возможно, сетка еще не видна на экране?

1 Ответ

0 голосов
/ 08 мая 2020

Это была одна из проблем ag-grid angular, которая была решена в v16, когда они представили этот обратный вызов - onFirstDataRendered

Попробуйте вызвать код изменения размера в onFirstDataRendered вместо onGridReady - 

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

Вы также можете попробовать использовать небольшой тайм-аут при вызове sizeColumnsToFit в onGridReady, если вы используете более старую версию.

Согласно документации -

Обратите внимание, что api.sizeColumnsToFit () должен знать ширину сетки, чтобы выполнять свои вычисления. Если сетка не привязана к DOM, то это будет неизвестно. В приведенном ниже примере сетка не привязана к DOM при ее создании (и, следовательно, api.sizeColumnsToFit () должна завершиться ошибкой). Сетка снова проверяется через 100 мс и снова пытается изменить размер. Это необходимо для некоторых фреймворков (например, Angular), поскольку объекты DOM используются перед прикреплением.

Пример здесь

...