Angular PivotGrid Virtualization

The PivotGrid offers configurable row and column virtualization of its data table to enable performance optimizations when displaying large data sets. While the user is scrolling the table, the PivotGrid renders only a predefined number of rows and columns, corresponding to the current scroll position.

Тhe virtual scrolling functionality of the PivotGrid relies on calculations that are based on the fixed and equal rowHeight of the rows, the pre-set pageSize and columns VirtualizationSettings properties, and the current scroll position of the scrollable data table container.

Getting Started

To configure the PivotGrid for virtual scrolling:

1. Set its height and width through the style property. The vertical (row) virtualization requires setting the height, and horizontal (column) virtualization requires setting the width.

   html

   <kendo-pivotgrid [style.height.px]="600" [style.width.px]="1000" ... ></kendo-pivotgrid>

2. Set the virtualScrolling option to true or a VirtualizationSettings configuration object.

3. If necessary, provide styling that will ensure all rows have equal height (required for the internal calculations). For example (exact pixel values may vary depending on the scenario, the installed Kendo theme, and any applied custom styling):

   css

   .k-pivotgrid-values table.k-pivotgrid-table .k-pivotgrid-cell {
       white-space: nowrap;
       height: 37px;
       line-height: 20px;
       padding: 8px 12px;
   }

To work properly, virtual scrolling requires you to set the following configuration options:

• (Required) virtualScrolling—Set it to true to use the default options, or provide a VirtualizationSettings object for further customization.
• (Optional) type—Set to row or column to enable the respective type of virtualization only. Default is both. For example, column virtualization is useful when PivotGrids have large number of columns in order to reduce the number of rendered elements. This options allows leaving column virtualization disabled for components that have only a few non-visible columns. The column virtualization requires the PivotGrid to do extra work and might reduce performance in some cases. As always, it's best to perform your own measurements when fine-tuning the application performance.
• (Optional) rowHeight—Has to represent the actual height of each PivotGrid row (tr) element in the DOM in pixels. The provided rowHeight number is used for internal calculations and does not set the row height of the PivotGrid. All PivotGrid rows must have equal height. The default value is 37.
• (Optional) rows—Represents the maximum number of rows that will be rendered in the PivotGrid data table. Setting the value to approximately three times the number of visible rows seems to yield a smooth scrolling experience while at the same time limits the number of rendered DOM elements for better performance. The default value is 50.
• (Optional) columns—Represents the maximum number of columns that will be rendered in the PivotGrid data table. The default value is 10.

The following example demonstrates some of the built-in virtualization of the PivotGrid in action.

Change Theme

Theme

Loading ...

Suggested Links

• Angular PivotGrid Homepage
• PivotGrid Configurator
• API Reference of the PivotGridComponent
• API Index of the PivotGrid