Virtual Scrolling: rowHeight

[Ewgenij]

https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual/

(Required) rowHeight—Has to represent the actual height of each Grid row (tr) element in the DOM. The provided rowHeight number is used for internal calculations and does not set the row height of the Grid.

 

This rowHeight seems to be some kind of magic number used for internal calculations. How do I know the value to set it to?

 

[Dimiter Topalov]

Hi Ewgenij,

The most straight-forward approach is to inspect the Grid TR elements height with the browser DOM inspector after applying the styles ensuring all rows will have the same height and the text will not wrap to new lines (demonstrated in the runnable demos):

https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual/#toc-virtualization-with-local-data

/*
     * Set a fixed row height of 36px (20px line height, 2 * 8px padding)
     *
     * [row height] = [line height] + [padding] + [border]
     *
     * Note: If using the Kendo UI Material theme, add 1px to the row height
     * to account for the bottom border width.
     */
    encapsulation: ViewEncapsulation.None,
    styles: [`
        .k-grid tbody td {
            white-space: nowrap;
            line-height: 20px;
            padding: 8px 12px;
        }
    `],

https://stackblitz.com/edit/angular-dnstkr?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik