React Data GridGrid Lifecycle
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
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.
First Data Rendered
The firstDataRendered
event fires the first time data is rendered into the grid.
Common Uses
- Resizing Columns.
- Execute row-based logic.
- Hiding loaders.
- Capture post-render stats.
This example demonstrates using firstDataRendered
to capture auto-calculated column widths. Click "Load Grid Data"
to calculate the first column's width.
Row Data Updated
The rowDataUpdated
event fires when the grid's data changes, by setting Updating Row Data or
by applying Transaction Updates. In the Server Side Row Model, use
the Model Updated Event instead.
Common Uses
- Refreshing related UI elements on data changes.
- Triggering calculations or application logic based on data changes.
- Broadcasting data changes to other parts of the app.
In this example, rowDataUpdated
refreshes another component when the grid's data changes.
Grid Pre-Destroyed
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.
In this example, gridPreDestroyed
saves column widths before grid destruction.