CODEWITHSUNDEEP
angularag-grid-ng2
Poonam Thote
Poonam Thote

Reputation: 417

ag grid sizeColumnsToFit for columns not working

I have used ag-grid ng2 and trying to apply sizeColumnsToFit. For example: If there are 4 columns then it should be automatically resized and fit to the width of grid. gridOptions.api.sizeColumnsToFit() not working.

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();

Upvotes: 13

Views: 66236

Answers (6)

Arun Kumar
Arun Kumar

Reputation: 209

import { FirstDataRenderedEvent } from '@ag-grid-community/core';
 public onFirstDataRedndered(event: FirstDataRenderedEvent){
    event.api.sizeColumnsToFit();
 }

Upvotes: 1

Rex
Rex

Reputation: 678

I implemented a reusable ag-grid react wrapper component that will resize its columns to fit its container's width automatically. It watches its container's width and listens to window.resize event, then it calls gridApi.sizeColumnsToFit() in useEffect when required. If interested, read the code in steps here, or see all in a working sample here at CodeSandBox.

Upvotes: 1

max
max

Reputation: 29983

You need to provide columnApi.autoSizeColumns() with a list of all column IDs like this:

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} … />
…

Upvotes: 3

Serhii Kimlyk
Serhii Kimlyk

Reputation: 105

Resizing Columns When Data Is Renderered There are two scenarios main where scenarios where you might want to resize columns based on grid data:

  1. Row Data is available at grid initialisation
  2. Row Data is available after grid initialisation, typically after data has been set asynchronously via a server call

In the first case you can fire autoSizeColumns() in either the gridReady or the firstDataRendered event as the row data will have been rendered by the time the grid is ready.

In the second case however you can only reliably use firstDataRendered as the row data will be made available, and hence rendered, after the grid is ready.

https://www.ag-grid.com/javascript-grid-resizing/

Upvotes: 5

Ashu
Ashu

Reputation: 51

Keeping the width of the container containing AgGrid anything less than 100% did the trick for me.

Upvotes: 3

bensonissac
bensonissac

Reputation: 695

Try this code.. while defining columnDefs set suppressSizeToFit: false for all fields,

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}
 ];

Then in onGridReady use the below code.

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

Upvotes: 17

Related Questions