CODEWITHSUNDEEP
javascriptag-gridag-grid-angular
user3531182
user3531182

Reputation:

AgGrid: Restoring state is moving auto group column to the right

I am seeing something weird with ag-grid v25.1

So, when you add rowGrouping for the first time, It is showing at the left. see below:

enter image description here

Then just save the state (with grouping added). Now restore the state. See below Row Grouped column is moved to right.

enter image description here

Grid Declaration

<ag-grid-angular
  #agGrid
  style="width: 100%; height: 100%;"
  id="myGrid"
  class="ag-theme-alpine"
  [columnDefs]="columnDefs"
  [defaultColDef]="defaultColDef"
  [sideBar]="sideBar"
  [rowGroupPanelShow]="rowGroupPanelShow"
  [pivotPanelShow]="pivotPanelShow"
  [debug]="true"
  [rowData]="rowData"
  (gridReady)="onGridReady($event)"
></ag-grid-angular>

https://www.ag-grid.com/angular-grid/column-state/#save-and-apply-state

Any workaround on this or anything on how to fix it?

Plnkr for repro https://plnkr.co/edit/ja0JupIYgY8g7Pwy?preview

Upvotes: 4

Views: 1902

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81520

This is a confirmed bug of AgGrid. The auto group column is moved to the far right after calling ColumnApi.applyColumnState(). A simple workaround in the meantime is:

  • Save the current column state somewhere using ColumnApi.getColumnState().
  • Apply the new column state.
  • Check if auto group column exist. The default column ID is 'ag-Grid-AutoColumn'.
  • If so, move it back to where it originally was by calling ColumnApi.moveColumnByIndex() using the last column state info.
saveState() {
  window.colState = this.gridColumnApi.getColumnState();
  window.group = this.gridApi;
}

getAutoGroupColIndex(colState) {
  return colState.findIndex(
    (column) => column.colId === 'ag-Grid-AutoColumn'
  );
}

restoreState() {
  if (!window.colState) {
    console.log('no columns state to restore by, you must save state first');
    return;
  }

  const oldAutoColumnIndex = this.getAutoGroupColIndex(window.colState);

  this.gridColumnApi.applyColumnState({
    state: window.colState,
    applyOrder: true,
  });

  const newAutoColumnIndex = this.getAutoGroupColIndex(
    this.gridColumnApi.getColumnState()
  );

  this.gridColumnApi.moveColumnByIndex(
    newAutoColumnIndex,
    oldAutoColumnIndex
  );
}

Demo

https://plnkr.co/edit/MS2w9vxMTpcDbOTp

Upvotes: 3

Related Questions