Grid Virtual Scrolling with Dynamic Height

Environment

Product

Progress® Kendo UI Grid

Description

How can I dynamically set the height of the Grid when virtual scrolling is enabled?

Solution

One of the required steps to enable the virtual scrolling feature of the Grid is to set the height property to fixed pixels. In real-world scenarios, there are cases when the Grid height must be dynamic and the data virtualized.

To implement the virtual scrolling of the Grid with dynamic height:

1. Set the height option of the Grid, to the innerHeight property of the Window.

   html

   <kendo-grid
       [data]="gridView"
       scrollable="virtual"
       [height]="height"
       ...
   ></kendo-grid>

   ts

   public height = window.innerHeight;

2. Add a custom resize event listener and update the Grid height property when the browser window is resized.

   ts

   ngAfterViewInit() {
       window.addEventListener("resize", () => {
         this.height = window.innerHeight;
       });
   }

If the Grid height must be 100% of a specific parent container then the height property must be updated according to the wrapper's height instead.

The following example demonstrates how to dynamically change the height of a virtual scrollable Grid.

Change Theme

Theme

Loading ...