New to Kendo UI for Angular? Start a free 30-day trial

Angular Data Grid Tracking Changes

The Angular Grid tracks changes by the index of the data item while the edited rows are tracked by reference.

The trackBy callback allows you to override the default behavior and provide your own logic of how data item changes will be tracked.

Tracking Changes by Index

The following example demonstrates how to track items only by index. This is especially useful when you want to avoid rerendering the detail row template when changes occur in master row.

html

<kendo-grid [data]="gridData" [trackBy]="trackByIndex"> </kendo-grid>

public trackByIndex(index: number, item: GridItem): any {
    return index;
}

Tracking Changes by a Data Item Field

To track Grid changes by a data item, use the GridItem which is the second argument of the trackBy callback.

The following example demonstrates how to track changes by items.

html

<kendo-grid [data]="gridData" [trackBy]="trackByItem"> </kendo-grid>

public trackByItem(index: number, item: GridItem): any {
    return item.data.ProductID;
}

Compare the effect of using a unique identifier with trackBy versus the default behavior by typing in the input field and sorting the Grid in the example below.

Change Theme

Theme

Loading ...

Understanding trackBy Performance Benefits in Kendo UI for Angular Grid

The trackBy function enhances the Kendo UI for Angular Grid's efficiency by identifying changes in the data array. Without trackBy, the Grid tracks items by their index or reference of the edited row, which may lead to unexpected results in some cases, for example when using templates alongside data operations like sorting.

When to Use trackBy?

Use trackBy when:

Handling large datasets.
Frequently updating data.
Optimizing performance by reducing DOM operations.
Managing complex templates, detail rows, or editing scenarios.
Unexpected editing behavior occurs due to the default tracking mechanism.

Common Pitfalls

Avoid these mistakes when using trackBy:

Using non-unique or mutable properties for tracking.
Performing complex computations within the function.
Relying on index-based tracking when unique identifiers exist.

Key Benefits of trackBy

Performance Optimization—Prevents unnecessary re-renders by tracking items with a unique identifier (e.g., an id).
Efficient Change Detection—Updates only modified items instead of re-rendering the entire list, enhancing performance for large or frequently updated data sets.
Lower Memory Usage—Reduces redundant DOM updates, improving responsiveness and resource efficiency.
Maintains Row State—Preserves row states (e.g., selection, editing) when sorting, filtering, or editing items.

Practical Scenarios

Dynamic Data Updates—Ensures smooth updates by re-rendering only changed items, ideal for real-time data feeds.
Large Data Sets—Avoids full re-renders, maintaining performance when only a few items change.
Editable Grid's—Preserves row states by re-rendering only modified rows, improving efficiency.
Pagination & Virtual Scrolling—Optimizes rendering as users navigate or scroll through the Grid.
Cell Templates—Maintains custom cell states or styles without re-rendering the entire Grid. For example, if a cell contains a text input or a checkbox and the Grid is sorted, the cell state is preserved.