Is there a way to dynamically set rowHeight in a kendo-grid?

[Manuel]

In the kendo grid there is a "size" property that can be set at runtime. We want to expose this option to the user. This means the value can change at runtime. This works as expected and changing the value at runtime to "small" makes the rows in the grid more compact.

The problem now arises when we enable virtual scrolling. When using this feature the property "rowHeight" has to be set in order for the virtual scrolling to work properly. Changing the "size" property obviously changes the row height. Therefore we tried to also update it at runtime. However this change does not seem to affect the grid. The virtual scrolling is still broken.

Is there a way to change the "rowHeight" property at runtime and get the changes applied to virtual scrolling?

I created a minimal StackBlitz based on your local virtual scrolling example. It changes the size and rowHeight in the ngAfterViewInit-method:
Kendo Grid dynamic row height - StackBlitz

[Martin Bechev]

Hi Manuel,

Thank you for the provided demo.

Dynamic change of the rowHeight property is possible, but the Grid needs to be reinitialized in order to consider the new virtual scrolling configurations and to be able to calculate the scroll position correctly. 

One possible way to reinitialize the Grid is to use ngIf:

https://stackblitz.com/edit/angular-fxdtag

Alternatively, the developer can create a second Grid that is configured to work with size small and virtual scrolling. When changing the size, the developer can toggle the visibility between both Grids (this way the setTimeout from the above demo will be eliminated).

I hope this sheds some light on the case.

Regards,
Martin
Progress Telerik