[Solved] Virtual scrolling with master/detail interactions

[Noah]

I have a grid where row height and detail row height are set correctly (i think) and virtual scrolling is turned on.  when I expand a row to show the detail view, as soon is i try to interact with the detail view (It has a tabstrip in it) it will jump that row to the top of the gird view.  It's pretty jarring.  ONLY when the detail component is at the top of the grid view will it let me interact with the detail view.  Not sure if i'm doing something wrong or there's a bug.

i attached a zipped mp4 of the behavior.

[Martin Bechev]

Hi Noah,

Thank you for the provided video. I noticed the problem,

Based on the provided details, I am not sure which of the Kendo is used. In the context of the Grid virtualization, since v20, the feature has been improved in terms of required properties to be set (without setting rowHeight, detailRowHeight) and in how the virtualization logic works at all:

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

Here is an example of Kendo v22 where the virtual scrolling works with a detail template and TabStrip inside:

https://stackblitz.com/edit/angular-9uwwseve

Here is an example with rowHeight and detailRowHeight set (they are still supported, but not mandatory for the virtualization):

https://stackblitz.com/edit/angular-9uwwseve-zlia2tzx

Please try updating the Grid to at least v20 and let us know how it goes.

Regards,
Martin Bechev
Progress Telerik

[Noah]

I am using the latest release version. 22.0.1

The behavior still exists.  It also exists in your sample.  try scrolling down to the middle of the grid, expand a row half way down the page and then try to interact with the tab strip. it jumps to the top of the page in your sample as well.

Both examples, with and without height settings, display the jumping behavior.

[Noah]

some additional notes. The tabstrip isn't needed to replicate, it was just easy to notice there because it's something we try to interact with.  Just an empty div, if you click on it, it jumps to the top of the view area in the grid.

Maybe related, or maybe it needs a different ticket.  In this same grid I have virtual columns.  On initial load, it scrolls normally. But if I sort one of the columns and then scroll, the X-axis scroll-bar will jump so that the sorted column is the leftmost column.  Also jarring. Turning off virtual columns stops the behavior.

[Martin Bechev]

Hi Noah,

Indeed, you are right. After some further debugging, I noticed the Grid is scrolled every time the content of the detail template isn't fully visible (cut off at the bottom).

I logged a bug report in our GitHub issue tracker here:

https://github.com/telerik/kendo-angular/issues/4841 

We understand that this may impact the productivity and some of the application features, and we apologize for that. We generally avoid committing to a specific ETA, as we typically abstain from giving exact timelines and making promises that we might not be able to hold.

As a token of gratitude for reporting this, I updated your Telerik points.

Please subscribe to the issue to be notified in a timely manner when there is any update.

Regarding the virtual columns problem, could you check if the issue is reproduced in the following demo and if I am missing something:

https://stackblitz.com/edit/angular-dgvaxpnn-cm9tvuel?file=src%2Fapp%2Fapp.component.ts

We have an issue with scrolling the Grid due to the virtual columns, but it was related to the filter menu:

https://github.com/telerik/kendo-angular/issues/4426

Looking forward to your reply.