Angular Data GridGrid Lifecycle

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. It will only be fired once unlike rowDataUpdated which is fired on every data change.

Row Data Updated

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.

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.

Angular PreDestroy Setup

When using Angular, the gridPreDestroyed event handler must be registered via grid options instead of as an Output event handler to work correctly.

For example:

this.gridOptions = {
    onGridPreDestroyed: () => {
        // handler code
    }
};