Ag-Grid: How to save and reload column order

Question

Using Ag-Grid, users can drag columns to order them the way they like. I need to allow the user to save their column order (to an SQL backend) so that it becomes the default column order for them. I was trying to get the column names like this:

var cols = schedGridOptions.columnApi.getAllColumns();
for (col in cols) {
    var colDef = col.getColDef();
    console.log(colDef.headerName);
}

This was an example I found for setting the header name, so I tried to adapt it to getting the header name. But I get this error:

JavaScript runtime error: Object doesn't support property or method 'getColDef'

Perhaps I'm not doing this correctly? I'm fairly new at using Ag-Grid. Looking for suggestions.

Answer 1

onColumnMoved will fire every time the column is moving but the drag didn't stopped.

Using onColumnMoved is not performant at all.

If you care about performance you should use onDragStopped

gridOptions.onDragStopped = function (params) {
  const colIds = params.columnApi.getAllDisplayedColumns().map(col => col.colId)
  console.log(colIds) // all visible colIds with the visible order
}