JavaScript Data GridGrid Lifecycle

ReactAngularVueJavascript

This section covers some common lifecycle events that are raised after grid initialisation, data updates, and before the grid is destroyed.

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.