Grid Virtualization and Performance

In Ignite UI for Angular, the IgxGrid control now utilizes the igxForOf directive and virtualizes its content both vertically and horizontally.

Demo


Enabling Virtualization

By utilizing the igxForOf directive the Data Grid now optimizes DOM rendering and memory consumption by rendering only what is currently visible in the view port and swapping the displayed data while the user scrolls the data horizontally/vertically. IgxGrid's width and height defaults to 100% which will enable virtualization if the content displayed cannot fit inside the available space and scrollbars are required either vertically or horizontally. However, it is also possible to explicitly set the grid's width and/or height to null which means that the related dimension will be determined by the total size of the items inside. No scrollbar will then be shown and all items will be rendered along the respective dimension (columns if width is null and rows if height is null).

The size of the data chunks is determined by:

  • The row height for the vertical (row) virtualization. This is determined by the rowHeight option and is 50(px) by default.
  • The individual column widths in pixels for the horizontal (column) virtualization. They can be determined by either setting explicit width for each column component or setting the grid's columnWidth option, which will be applied to all columns that don't have explicit width set.

In most cases, letting the grid apply its default behavior by leaving dimensions unset will produce the desired layout. For column widths it is determined by the column count, the columns with set width, and the calculated width of the grid's container. The grid will try to fit all columns inside the available space as long as the width it attempts to assign is not under 136(px). In such cases, columns with unassigned width will receive the minimum width of 136(px) and a horizontal scrollbar will be shown. The grid will be horizontally virtualized.

Explicitly setting column widths in percentages (%) will, in most cases, create a grid that is not virtualized horizontally as it will not have a horizontal scrollbar.

Remote Virtualization

IgxGrid supports the scenario in which the data chunks are requested from a remote service, exposing the behavior implemented in the igxForOf directive it uses internally.

Grid Remote Virtualization Demo


To utilize this feature, you need to subscribe to the onDataPreLoad output so that you make the appropriate request based on the arguments received, as well as set the public IgxGrid property totalItemCount with the respective information coming from the service.

<igx-grid #grid [data]="remoteData | async" [height]="'500px'" [width]="'100%'" [autoGenerate]='false' (onDataPreLoad)="processData(false)"
    (onSortingDone)="processData(true)">
    <igx-column [field]="'ProductID'" [sortable]="true"></igx-column>
    <igx-column [field]="'ProductName'" [sortable]="true"></igx-column>
    <igx-column [field]="'UnitPrice'" [dataType]="'number'" [formatter]="formatCurrency" [sortable]="true"></igx-column>
    ...
</igx-grid>
public ngAfterViewInit() {
    this._remoteService.getData(this.grid.virtualizationState, this.grid.sortingExpressions[0], true, (data) => {
            this.grid.totalItemCount = data["@odata.count"];
    });
}

public processData() {
    if (this.prevRequest) {
        this.prevRequest.unsubscribe();
    }

    this._prevRequest = this._remoteService.getData(this.grid.virtualizationState,
        this.grid.sortingExpressions[0], reset, () => {
        ...
        this.cdr.detectChanges();
    });
}

When requesting data, you need to utilize the IForOfState interface, which provides the startIndex and chunkSize properties.

Note: The first chunkSize will always be 0 and should be determined by you based on the specific application scenario.

Remote Sorting/Filtering Virtualization

To provide remote sorting and filtering, you need to subscribe to the onDataPreLoad, onSortingDone, onFilteringDone outputs so that you make the appropriate request based on the arguments received, as well as set the public IgxGrid property totalItemCount with the respective information coming from the service.

Note that when requesting remote data, filtering operation is case-sensitive.


Virtualization Limitations

  • Specified dimensions for rows/columns should match the actual rendered elements. For instance, if there is a template or class defined for the grid cells, which expand the row heights and they no longer match the specified rowHeight value the vertical virtualization will no longer work as expected. The virtual items count will no longer reflect the actual elements in the DOM. The same applies to columns and their widths.
  • When the grid has responsive width and/or height and responds to size changes of the browser's window or other elements sizes, the scroll position resets to 0. A more natural solution to the changing scrollbar position and size is planned for future releases.
  • On Mac OS horizontal scrollbar is not visible when "Show scrollbars only when scrolling" system option is set to true (which is the default value). This is because the grid’s row container has an overflow set to hidden. Change the option to "Always" and the scrollbar will appear.

FAQ

Why having dimensions in the grid is neccessary for virtualization to work?

Without information about the sizes of the container and the items before rendering them setting the width or height of a scrollbar or determining which of the items should be in the view when you scroll to a random location in the grid is erroneous. Any assumptions on what the actual dimensions might be could lead to unnatural behavior of the scrollbar and ultimately suboptimal experience for the end-user. This is why setting the related dimensions is enforced in order for virtualization to take affect.

API

Additional Resources

Our community is active and always welcoming to new ideas.

View page on GitHub