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

Grid Row Height Issue

9 Answers 516 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Shivam
Top achievements
Rank 1
Shivam asked on 23 Mar 2021, 07:57 AM

Hi Team,

I am using the kendo grid in angular. I am facing one issue, whenever I change the row height ,the height of "k-height-container" doesn't change.
It only changes when the total rows is changed in grid. Is there a way to update the k-height-container height when the row height changes.

We are using min-height to set the row height and change the same whenever required.
Let say if the grid is initialized with 32px row height and we have 500 rows, so the container height is 16000px, now if change the row height to 28px, due to which ng-reflect-detail-row-height and ng-reflect-row-height both are set to 28px, but the container height is not reset to 12000px, instead it is still showing at 16000px.

Thanks,
Shivam

9 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 24 Mar 2021, 12:42 PM

Hello Shivam,

The built-in rowHeight property does not set the height of the grid rows. Instead, it represents the actual height of each Grid row in the DOM. The rowHeight value is used for internal calculations when virtual scrolling is enabled:

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

Using the Default theme, the rowHeight is 36px:

Here is a demo:

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

Regarding the row height, currently, the Grid API does not provide a built-in option for controlling the dimension of the row. However using custom CSS code, the height can be customized.

Here is an example:

https://stackblitz.com/edit/angular-uez2sd-x4nzm1

I hope the provided information sheds some light on the case.

Regards,
Martin
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/.

0
Shivam
Top achievements
Rank 1
answered on 31 Mar 2021, 11:15 AM
Hi Martin,

I had tried using line-height, but still getting the extra space when I try to reduce the line-height from 32px to 24px.
Due to suspect any other issue or any change required to overcome this.
0
Martin
Telerik team
answered on 01 Apr 2021, 10:15 AM

Hello Shivam,

Said that - "I had tried using line-height, but still getting the extra space...", I am not sure what you mean by extra space. Please could describe in more detail the expected end result so that I could try to suggest a solution. Thank you in advance.

Regards,
Martin
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/.

0
Shivam
Top achievements
Rank 1
answered on 01 Apr 2021, 04:47 PM
We are using Kendo grid, where we have implemented kendo virtual scroll. My total data row length is 500 , take is 50. In normal mode the line height is 32px and if I scroll to the end(500th row), I don't find any extra space, but when I change my line-height to 28px and scroll down to 500th row, I found extra space.
0
Shivam
Top achievements
Rank 1
answered on 05 Apr 2021, 10:03 AM
We are using Kendo grid, where we have implemented kendo virtual scroll. My total data row length is 500 , take is 50. In normal mode the line height is 32px and if I scroll to the end(500th row), I don't find any extra space, but when I change my line-height to 28px and scroll down to 500th row, I found extra space.
0
Martin
Telerik team
answered on 05 Apr 2021, 10:34 AM

Hello Shivam,

Thank you for the provided screenshot.

The reported white space at the bottom of the rows might be caused by several reasons:

  • pageSize option is set to a smaller value. Please ensure that the pageSize is set to at least three times the number of the visible Grid elements (e.g. if there are 10 rows visible, set the pageSize to 30).
  • changing the row height by using custom CSS styles, requires updating the rowHeight option too.
    For example, if we customize the row height by setting line-height: 28px; the rowHeight should represent the actual height of each Grid row (tr) element in the DOM. For example, check this demo:

I hope this sheds some light on this case. 

Regards,
Martin
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/.

0
Jaspreet
Top achievements
Rank 1
Iron
Veteran
answered on 08 Apr 2021, 03:07 PM
We have implemented all suggested steps, still getting the extra space, PFA the screenshots of the same.
0
Shivam
Top achievements
Rank 1
answered on 11 Apr 2021, 08:57 AM
We have implemented all suggested steps, still getting the extra space, PFA the screenshots of the same.
0
Martin
Telerik team
answered on 12 Apr 2021, 08:47 AM

Hello Jaspreet and Shivam,

Thank you for the provided screenshots.

Please could I ask you to provide a runnable example (or update this StackBlitz example) demonstrating the issue and the implementation that you are currently using? Thank you in advance.

Regards,
Martin
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid
Asked by
Shivam
Top achievements
Rank 1
Answers by
Martin
Telerik team
Shivam
Top achievements
Rank 1
Jaspreet
Top achievements
Rank 1
Iron
Veteran
Share this question
or