This section covers some common lifecycle events that are raised after grid initialisation, data updates, and before the grid is destroyed.
The events on this page are listed in the order they are raised.
Grid Ready Copy Link
The gridReady event fires upon grid initialisation but the grid may not be fully rendered.
Common Uses
- Customising Grid via API calls.
- Event listener setup.
- Grid-dependent setup code.
In this example, gridReady applies user pinning preferences before rendering data.
import {
ClientSideRowModelModule,
ColumnApiModule,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
createGrid,
enableDevValidations,
} from "ag-grid-community";
import { TAthlete, getData } from "./data";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([ColumnApiModule, ClientSideRowModelModule]);
let gridApi: GridApi;
const gridOptions: GridOptions = {
columnDefs: [
{ field: "name", headerName: "Athlete", width: 250 },
{ field: "person.country", headerName: "Country" },
{ field: "person.age", headerName: "Age" },
{ field: "medals.gold", headerName: "Gold Medals" },
{ field: "medals.silver", headerName: "Silver Medals" },
{ field: "medals.bronze", headerName: "Bronze Medals" },
],
rowData: getData(),
onGridReady: (params: GridReadyEvent<TAthlete>) => {
const checkbox = document.querySelector<HTMLInputElement>(
"#pinFirstColumnOnLoad",
)!;
const shouldPinFirstColumn = checkbox && checkbox.checked;
if (shouldPinFirstColumn) {
params.api.applyColumnState({
state: [{ colId: "name", pinned: "left" }],
});
}
},
};
function reloadGrid() {
if (gridApi) {
gridApi.destroy();
}
setTimeout(() => {
// Artificial delay to show grid being destroyed and re-created
const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);
}, 500);
}
const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);
if (typeof window !== "undefined") {
// Attach external event handlers to window so they can be called from index.html
(<any>window).reloadGrid = reloadGrid;
}
First Data Rendered Copy Link
The firstDataRendered event fires the first time data is rendered into the grid. It will only be fired once unlike rowDataUpdated which is fired on every data change.
Row Data Updated Copy Link
The rowDataUpdated event fires every time the grid's data changes, by Updating Row Data or by applying Transaction Updates. In the Server Side Row Model, use the Model Updated Event instead.
In this example the time at which firstDataRendered and rowDataUpdated are fired is recorded above the grid. Note that firstDataRendered is only set on the initial load of the grid and is not updated when reloading data.
import {
ClientSideRowModelModule,
FirstDataRenderedEvent,
GridApi,
GridOptions,
ModuleRegistry,
RowDataUpdatedEvent,
createGrid,
enableDevValidations,
} from "ag-grid-community";
import { TAthlete, fetchDataAsync } from "./data";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([ClientSideRowModelModule]);
const updateRowCount = (id: string) => {
const element = document.querySelector(`#${id} > .value`);
element!.textContent = `${new Date().toLocaleTimeString()}`;
};
const setBtnReloadDataDisabled = (disabled: boolean) => {
(document.getElementById("btnReloadData") as HTMLButtonElement).disabled =
disabled;
};
let gridApi: GridApi;
const gridOptions: GridOptions = {
columnDefs: [
{ field: "name", headerName: "Athlete" },
{ field: "person.age", headerName: "Age" },
{ field: "medals.gold", headerName: "Gold Medals" },
],
loading: true,
onFirstDataRendered: (event: FirstDataRenderedEvent) => {
updateRowCount("firstDataRendered");
console.log("First Data Rendered");
},
onRowDataUpdated: (event: RowDataUpdatedEvent<TAthlete>) => {
updateRowCount("rowDataUpdated");
console.log("Row Data Updated");
},
onGridReady: () => {
console.log("Loading Data ...");
fetchDataAsync()
.then((data) => {
console.log("Data Loaded");
gridApi!.setGridOption("rowData", data);
})
.catch((error) => {
console.error("Failed to load data", error);
})
.finally(() => {
gridApi!.setGridOption("loading", false);
setBtnReloadDataDisabled(false);
});
},
};
function onBtnReloadData() {
console.log("Reloading Data ...");
setBtnReloadDataDisabled(true);
gridApi!.setGridOption("loading", true);
fetchDataAsync()
.then((data) => {
console.log("Data Reloaded");
gridApi!.setGridOption("rowData", data);
})
.catch((error) => {
console.error("Failed to reload data", error);
})
.finally(() => {
gridApi!.setGridOption("loading", false);
setBtnReloadDataDisabled(false);
});
}
const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);
if (typeof window !== "undefined") {
// Attach external event handlers to window so they can be called from index.html
(<any>window).onBtnReloadData = onBtnReloadData;
}
Grid Pre-Destroyed Copy Link
The gridPreDestroyed event fires just before the grid is destroyed and is removed from the DOM.
Common Uses
- Clean up resources.
- Save grid state.
- Disconnect other libraries.
The Grid State Example demonstrates how gridPreDestroyed can be used to save and restore grid state.