ag grid sizeColumnsToFit для столбцов не работает

Я использовал ag-grid 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();

angular ag-grid-ng2
person Poonam Thote    schedule 28.02.2017    source источник
comment
Не могли бы вы поделиться своим кодом? Нужно посмотреть, как вы реализовали до сих пор....   -  person Vikash B    schedule 28.02.2017

Ответы (5)


arrow_upward
11
arrow_downward

Попробуйте этот код.

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(); 
}
person bensonissac    schedule 20.12.2017
comment
Привет @TutorBoys: вы, ребята, нашли решение? - person chewi; 17.07.2019

arrow_upward
3
arrow_downward

Изменение размера столбцов при отображении данных Существует два основных сценария, в которых вам может понадобиться изменить размер столбцов на основе данных сетки:

  1. Данные строки доступны при инициализации сетки
  2. Данные строки доступны после инициализации сетки, обычно после того, как данные были установлены асинхронно через вызов сервера.

В первом случае вы можете запустить autoSizeColumns() либо в событии gridReady, либо в событии firstDataRendered, поскольку данные строки будут отрисованы к моменту готовности сетки.

Однако во втором случае вы можете надежно использовать только firstDataRendered, поскольку данные строки будут доступны и, следовательно, отрисованы после того, как сетка будет готова.

https://www.ag-grid.com/javascript-grid-resizing/< /а>

person Serhii Kimlyk    schedule 12.06.2019
comment
Что ты имеешь в виду? - person chewi; 17.07.2019

arrow_upward
2
arrow_downward

Сохранение ширины контейнера, содержащего AgGrid, менее 100% помогло мне.

person Ashu    schedule 12.04.2019
comment
Не могу поверить, что это сработало. Я добавил ширину 99,9%, и полоса прокрутки исчезла. Странный - person roli roli; 12.09.2020

arrow_upward
1
arrow_downward

Вам нужно предоставить columnApi.autoSizeColumns() список всех идентификаторов столбцов следующим образом:

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} … />
…
person max    schedule 10.07.2020

arrow_upward
1
arrow_downward

Я реализовал многоразовый компонент-обертку ag-grid, который автоматически изменит размер своих столбцов, чтобы они соответствовали ширине контейнера. Он наблюдает за шириной своего контейнера и прослушивает событие window.resize, а затем при необходимости вызывает gridApi.sizeColumnsToFit() в useEffect. Если интересно, прочитайте код в шагах здесь или посмотрите все в рабочем образце здесь в CodeSandBox.

person Rex    schedule 15.03.2021