Grid Legacy Virtualization Requirements
Environment
| Product | Progress® Kendo UI for Angular Grid |
Description
This article explains the requirements for enabling legacy virtualization in the Kendo UI for Angular Grid for versions below 19. Starting with version 19, most of these requirements are optional or handled automatically by the Grid, making virtualization more streamlined.
Requirements
The following configuration properties are required for legacy virtualization in versions earlier than 19. In version 19 and above, most of these are optional and handled automatically by the Grid:
| Property | Requirement (v < 19) | Requirement (v ≥ 19) | Description |
|---|---|---|---|
height | Required | Required | Set a fixed height for the Grid, either through the input or CSS. |
scrollable | Required | Required | Set to "virtual". |
data | Required | Required | Provide data as GridDataResult with a total field. |
rowHeight | Required | Optional | Set the row height for calculations (v < 19: for calculations only, v ≥ 19: sets actual row height in the DOM). |
skip | Required | Optional | Set the number of rows to skip when scrolling. |
pageSize | Required | Optional | Set the number of rows to display in the Grid. Should be at least three times the visible rows in the Grid. |
detailRowHeight | Optional | Optional | Set if using detail rows. |
For grouping the kendoGridGroupBindingdirective is required to be set for the Grid data. The directive supports only the processing of in-memory data and you have to provide the full set of data that will be processed.
<kendo-grid [kendoGridGroupBinding]="data"></kendo-grid>Example
Example setup for legacy virtualization:
/* Sets the row height for the Grid */
.k-grid .k-grid-content td {
white-space: nowrap;
line-height: 20px;
padding: 8px 12px;
}<kendo-grid
[data]="gridData"
[height]="400"
scrollable="virtual"
[rowHeight]="36"
[skip]="skip"
[pageSize]="pageSize"
(pageChange)="onPageChange($event)">
<!-- ...columns... -->
</kendo-grid>public gridData: GridDataResult = { data: [], total: 0 };
public skip = 0;
public pageSize = 100;
public onPageChange(event: PageChangeEvent): void {
this.skip = event.skip;
// Load data for the current page
}The following example demonstrates the legacy setup for both data binding and grouping virtualization. Use the switch button to toggle between both bindings.