Grid Row Height Issue

[Shivam]

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

[Martin Bechev]

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

[Shivam]

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.

[Martin Bechev]

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

[Shivam]

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.

[Shivam]

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.

[Martin Bechev]

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

[Jaspreet]

We have implemented all suggested steps, still getting the extra space, PFA the screenshots of the same.

[Shivam]

We have implemented all suggested steps, still getting the extra space, PFA the screenshots of the same.

[Martin Bechev]

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