Virtual Columns not working

[Joe]

The grid renders the first page plus a few more so you can scroll right a little bit and stops there.

There is no error message, all columns have width.

Are there other settings that are incompatible with this feature?

I've been trying variations with no success.

I also tried bringing the example into my component, it also stopped working.

So I went through my dependencies and didn't find any discrepancies.  Anything I did find I upgraded.

This is a hybrid Angular/Angularjs application, though this particular route is all Angular.

We have also been using onpush, but turning this off didn't seem to make a difference for the example grid.

Angular version 8.2.14

[Joe]

Here is a reproduction.

https://github-alsaec.stackblitz.io/#/contacts

It appears virtual columns, for some reason, is not compatible with a hybrid angular application.

[Martin]

Hi Joe,

Thank you for the provided project.

I successfully opened the Contacts page and saw 7 columns total (last two are grouped by Shipment column). How many columns should be visible in total. 

In order to avoid any potential misunderstanding, I will recap the prerequisites to enable the virtual columns feature of the Grid:

- the scrollable option should be set to virtual.

- the virtualColumn option needs to be set to true.

- as you said, all columns should have set width property.

Based on the provided information is hard for us to determine what causes the experienced issue. I am afraid that we need some more details about the case, such as code snippets of the markup, how many columns should be rendered, or any other information that might be helpful. Up to now, we are unaware of such type of behavior and cannot conclude if this is caused due to the hybrid nature of the application. We are looking forward to hearing back from you with more details. Thank you in advance.

Regards,
Martin
Progress Telerik

[Joe]

The grid and data is from the documentation https://www.telerik.com/kendo-angular-ui/components/grid/columns/virtual/

looks like there are about 23 columns

here is the editor url https://stackblitz.com/edit/github-alsaec

[Martin]

Hi Joe,

Thank you for the provided additional details about this case.

I checked the provide StackBlitz and what makes me an impression is the outdated version of the Material theme. I updated the version in the package.json file from 3.1.0 -> 3.16.0 and now it works as expected:

Here is the Chane Log of the theme:

https://www.telerik.com/kendo-angular-ui/components/styling/theme-material/changelog/

Please check the updated example:

https://stackblitz.com/edit/github-alsaec-yjwnnm?file=package.json

Let me know if I can assist any further.

Regards,
Martin
Progress Telerik