Dynamic kendo grid height on window resize?

Question

Basically I have a web page with a header div and a bottom div and a kendo grid in between. When I resize the window I want the grid to automatically adjust its height so that the three divs combined will always fit the window height.

I've looked up answers and tried calculating grid height in a function and calling it on resize but it didn't work for me. I also read from the Telerik forum that to set a grid 100% height of its container the container will need to be set an explicit height, but I don't want to set the container div height in pixels.

I'm feeling pretty dumb to be looking at forum posts around 2010 to solve a problem in 2020. Any help would be appreciated, thanks in advance!

Answer 1

I have tried obtaining this for years and gave up. There is one way that works, but disables scrolling in the view (but not on the grid): data-stretch="true" on the view. Then you set the grid height and width to 100% I think.

Answer 2

Try this :

// Put header div, bottom div or any other element class name in an array except grid.
var elementsClassNames = ["header", "footer"];

// trigger onResize() event on window resize.
@HostListener('window:resize')
onResize() {
    this.elementsHeight = 0;
    this.calculateDynamicHeight(elementsClassNames);
}

// Logic to calculate the dynamic height.
calculateDynamicHeight(classList: any[]) {
    let elementsHeight = 0;
    const docHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    for (let i = 0; i < classList.length; i++) {
        if (document.querySelector(classList[i]) as HTMLElement) {
            elementsHeight += (document.querySelector(classList[i]) as HTMLElement).offsetHeight;
        }
    }
    const kendoGridHeight = (docHeight - elementsHeight); // This will return the dynamic height of the Kendo Grid.
}