Before ag-grid v11.0, sizeColumnsToFit() fired with an event that did not pass the parameter 'finished=true'. When a user manually resized a column, the event would pass 'finished=true' once the resize drag was plete. This allowed me to distinguish between a manual and automatic column resize.

As of ag-grid v11.0, sizeColumnsToFit() now fires an event with parameter 'finished=true'. Is there any way to distinguish between this automatic resize and a manual user resize?

Before ag-grid v11.0, sizeColumnsToFit() fired with an event that did not pass the parameter 'finished=true'. When a user manually resized a column, the event would pass 'finished=true' once the resize drag was plete. This allowed me to distinguish between a manual and automatic column resize.

As of ag-grid v11.0, sizeColumnsToFit() now fires an event with parameter 'finished=true'. Is there any way to distinguish between this automatic resize and a manual user resize?

• javascript
• ag-grid

5 Answers 5

The ColumnEvent, from which the ColumnResizedEvent is derived has a "source" property that reads "sizeColumnsToFit" or "uiColumnDragged" and even "autosizeColumns" when a you double click the partition.

https://www.ag-grid./javascript-grid-events/#properties-and-hierarchy

You should be able to use the source to determine how the event was fired.

myEventHandler(ev: ColumnResizedEvent) {
  if (ev.source === 'sizeColumnsToFit') {
    do.this;
  } else {
    do.that;
  }
}

when you drag the column manually, source is always "uiColumnDragged"

 if (event.source === 'uiColumnDragged') { 
               // your logic here
 }

Code added since 10

colsToFireEventFor.forEach( (column: Column) => {
            let event: ColumnResizedEvent = {
                type: Events.EVENT_COLUMN_RESIZED,
                column: column,
                columns: [column],
                finished: true,
                api: this.gridApi,
                columnApi: this.columnApi
            };
            this.eventService.dispatchEvent(event);
        });

You can try to modify ment out finished: true property or just use version 10.0, where this func looks like this:

 colsToFireEventFor.forEach( (column: Column) => {
            let event = new ColumnChangeEvent(Events.EVENT_COLUMN_RESIZED).withColumn(column);
            this.eventService.dispatchEvent(Events.EVENT_COLUMN_RESIZED, event);
        });

We can set manually and automatically columns size in the following way

const onColumnResized = useCallback(params => {
  if (params.source === 'uiColumnDragged' && params.finished) { // automatically
    gridParams.api.sizeColumnsToFit()
  } else { // manually
    const colId = params.column.colId
    const value = columns.map(v => {
        if (v.colId === colId) {
            v.width = params.column.actualWidth
        }
        return v
    })
    if (value) {
        setColumns(value)
    }
  }
}, [ gridParams, setColumns ])

initial render has a event source type of "flex". This causes it to render the method initially which is not what I wanted. Code below allowed me to only trigger the event when I wanted it to.

if (e.source === 'uiColumnResized' || e.source === 'uiColumnMoved') {

    --> your code

}