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

Grid Virtual Scrolling with Dynamic Height


ProductProgress® Kendo UI Grid


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


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.

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

    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.

View Source
Change Theme:

In this article

Not finding the help you need?