7

According to ag-grid, the column order will follow the order they were specified in column definitions. Reference

But this is not working when working with ag-grid-angular. Some columns are showing up first, even though they were specified at the end of the column definitions. Take a look at some example codes,

// grid.ts
// helper function to generate a definition of a single column
function generateColDef() {
    return { ... };
}

// helper function to dynamically generate ColDefs
export function getColDef(someArgs) {
    const someDynamicCols = someArgs.map((arg) => {
        return generateColDef(.....);
    })
    const colDefs = [
        slColumn,   // A column to show serial number
        generateColDef('id', 'ID', {
            editable: false,
        }),
        generateColDef('name', 'Name', {
            editable: false,
        }),
        ...someDynamicCols,
    ];
    return colDefs;
}

// html
<ag-grid-angular [columnDefs]="colDefs" [rowData]="rowData | async">

// component
args = { some args fetched from server }
colDefs = grid.getColDef(args);
rowData = { some data fetched from server }

What I expect is that the 'ID' and 'Name' columns will show first and then the rest of the someDynamicCols will be displayed. But ag-grid sometimes displays the someDynamicCols first and then the 'ID' and 'Name' columns.

I tried using the ag-grid API to set colDefs instead of using 2-way binding but the result stayed the same.

Can someone explain what the issue might be? Is it the ag-grid API or am I doing something wrong?

I am using the latest ag-grid (24.0.0) with angular 10

3
  • can you create a small plunkr or stackblitz reproducing your issue. it looks like debugging issue.. Commented Oct 22, 2020 at 13:11
  • My use case makes building a plunkr a bit difficult. But I'll try to add one. Thanks for the suggestion
    – Jahir
    Commented Oct 22, 2020 at 13:21
  • just try to add minimal code which is enough to reproduce the issue ,that will make easy for folks here to debug. Commented Oct 22, 2020 at 13:24

6 Answers 6

30

EDIT 2021/10/20

Thanks to @JabbyPanda

applyColumnDefOrder API is deprecated since ag-grid 26

AG-5392 - Now when setting / updating Column Definitions, the order of the Columns in the grid will always match the order of the Column Definitions. Prior to v26, applyColumnDefOrder was used to achieve this, however this is now the default behaviour.

https://www.ag-grid.com/archive/26.0.0/javascript-data-grid/column-updating-definitions/


From the comments: You need to be on >= 24.0.0 version of ag-grid


After a long time, I've found the answer to this problem. I'm adding the solution in case it helps someone else.

The problem was, I was initializing the column definitions with some initial columns. So, when I added a new column, ag-grid kept the initial columns in their place and added the new columns after them. This is the default ag-grid behavior.

To override this behavior and make ag-grid always follow the column order, set applyColumnDefOrder property to true in Grid Options.

This is mentioned in the ag-grid docs: https://www.ag-grid.com/javascript-grid-column-updating-definitions/#applying-column-order

3
  • 2
    You need to be on version 24.0.0 or greater to use this property.
    – harleybl
    Commented May 1, 2021 at 2:13
  • Thanks for this tip. An easy fix but you have to know how!
    – Evan
    Commented Oct 1, 2021 at 18:26
  • the documentation page mentioned above for ag-grid v24 is moved to ag-grid.com/archive/24.0.0/…
    – JabbyPanda
    Commented Oct 19, 2021 at 17:03
2

applyColumnDefOrder API is deprecated since ag-grid 26

AG-5392 - Now when setting / updating Column Definitions, the order of the Columns in the grid will always match the order of the Column Definitions. Prior to v26, applyColumnDefOrder was used to achieve this, however this is now the default behaviour.

To turn off this behaviour, i.e. to maintain the order of Columns between updates to Column Definitions, set the grid property maintainColumnOrder=true

https://www.ag-grid.com/archive/26.0.0/javascript-data-grid/column-updating-definitions/

1

for some one like me who has the issu yet, the trick is to set an empty array between update and it works:

api.updateColDef([])
api.updateColDef(newCols)
0

Sometimes this issue can also occur when you load columnDefs variable multiple times e.g., with each button click or similar.

Best would be to load/ initialize the columnDefs only once and reload/ refresh row data on-demand.

0

This will ensure the Column's order should be maintained.

Set the grid property maintainColumnOrder=true

EX:

<ag-grid-angular
      style="width: 100%; height: 100%;"
      class="ag-theme-alpine"
      [defaultColDef]="defaultColDef"
      [maintainColumnOrder]="true"
      [columnDefs]="columnDefs"
      [rowData]="rowData"
      (gridReady)="onGridReady($event)"
    ></ag-grid-angular>

Reference: Maintain Column Order - https://www.ag-grid.com/angular-data-grid/column-updating-definitions/

0

Using AG-grid 30.2.*

Setting grid property maintainColumnOrder = true & property applyOrder = true of column api state in grid options solved the issue for me.

[maintainColumnOrder]="true"

onGridReady: (event: AgGridEvent) => {
    event.columnApi.applyColumnState({ state: colState, applyOrder: true });
}

Note - colState is state saved/wanted to persists.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.