Unable to get the column ID or name while dragging it out of the ag-grid to hide the column

I'm working on a POC where I need to remove/hide a column when it's dragged out of the ag-grid using gridApi in Angular.

Below is the column definition I've used for the POC.

public columnDefs = [
{
headerName: 'col-1',
field: 'col-1'
},
{
headerName: 'col-2',
field: 'col-2'
}
];


I've used the below gridOptions.

gridOptions: GridOptions = {
suppressDragLeaveHidesColumns: false
onDragStopped: (event) => this.onColumnDragEnd(event)
};


Below is the onColumnDragEnd event code.

onColumnDragEnd(event: any) void{
const draggedColumn = event.column;
console.log(draggedColumn) //this is not returning neither the column ID or the name.
}


Please find the attached screenshot below to check the details being returned by the above console statement.



Is there anyway to get the column ID or name so that I can compare with the intital colDef and update once the column is dragged out of the ag-grid and remove/hide it in the grid view.

Continue reading...