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

 # 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 (), но сетка возвращается с нулевой шириной, возможно, сетка еще не видна на экране?


angularjs grid ag-grid ag-grid-angular ag
person avi    schedule 07.05.2020    source источник
comment
вы определили ширину родительских блоков ag-grid?   -  person Pratik Bhat    schedule 08.05.2020
comment
Я не устанавливаю ширину.   -  person avi    schedule 08.05.2020
comment
попробуйте установить фиксированную ширину сетки ag в пикселях вместо 100%   -  person Pratik Bhat    schedule 08.05.2020
comment
это не работает   -  person avi    schedule 08.05.2020

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

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

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

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

Пример здесь

person Pratik Bhat    schedule 08.05.2020
comment
он подходит только для первой вкладки, а не для другой вкладки, и показывает эту ошибку - _co.onFirstDataRendered не является функцией - person avi; 08.05.2020
comment
вам нужно использовать разные gridOptions для каждого экземпляра сетки. Я вижу, вы используете одну и ту же сетку - person Pratik Bhat; 08.05.2020