This is a migrated thread and some comments may be shown as answers.

Virtual Scrolling: rowHeight

1 Answer 23 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ewgenij
Top achievements
Rank 1
Veteran
Ewgenij asked on 15 Feb 2021, 09:13 AM

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?

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Dimiter Topalov
Telerik team
answered on 16 Feb 2021, 08:20 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Ewgenij
Top achievements
Rank 1
Veteran
Answers by
Dimiter Topalov
Telerik team
Share this question
or