After upgrading ag-grid from 26 to 29, I started to have some problems with ColumnState.
Could you explain what I am doing wrong or what change has been applied to 29 so that it won’t work anymore?
I expect getColumnState
to return the same as what we recently saved by applyColumnState
.
So here is my grid:
function useGridState(): {
onGridReady: (param: GridReadyEvent) => void;
} => {
const gridApi = useRef<GridApi | null>(null);
const columnApi = useRef<ColumnApi | null>(null);
const onGridReady = (params: GridReadyEvent) => {
gridApi.current = params.api;
columnApi.current = params.columnApi;
const result = columnApi.current.applyColumnState({
state: NEW_SORT_ORDER,
});
// SUCCESS: column state is exactly NEW_SORT_ORDER
console.log("ready NEW_SORT_ORDER", columnApi.current.getColumnState())
};
return { onGridReady };
}
function MyGrid() {
const { onGridReady } = useGridState();
const handleSortModelChange = (event: SortChangedEvent) => {
// FAILED: Here I am expecting the NEW_SORT_ORDER
// which was saved onGridReady
// but this state is empty
console.log("newState", event.columnApi.getColumnState())
};
return (
<Grid onGridReady={onGridReady} onSortChanged={handleSortModelChanged} />
)
}
So the logic is next:
- I am setting up NEW_SORT_ORDER when the grid is ready, and
applyColumnState
automatically triggersonSortChanged
; - Inside
onSortChanged
I am gettingcolumnApi
from params and expected state to be the same as inonGridReady
but they are different;
What the problem here could be?
Is it possible that I am calling different columnApi
in my component and in my hook?
Br, Igor