Expandable row scrolling jumps

[jon-armstrong-zz]

I have configured a grid with expandable rows, but my expandable row groups have a variable number of rows. Since the row height on the main grid is required to be a fixed value, I need the rows within the expandable row group to scroll so I can see the ones that don't fit in the viewport. Unfortunately, when I attempt to scroll within the row group, the scroll jumps around (tested in Mac Firefox and Chrome). It appears that the scroll listener from the main grid may be interfering. Basically, this happens whenever the height of the expandable rows exceeds the row height on the parent table.

Since it has been indicated elsewhere (#1887) that variable row height isn't something that will be implemented, which would be another solution to this issue, then being able to scroll properly within the expandable row group would be appreciated.

[PaulL1]

@jpuri: is this a problem in expandable do you think, or more to do with the new scroll behaviour @c0bra?

[jpuri]

Hi @jon-armstrong ,
I am looking into the issue, but in the mean while can you also plz try this option: expandableRowHeight.

[jon-armstrong-zz]

@jpuri, I am already setting expandableRowHeight. Otherwise, it looks like the code defaults to 150. Either way, the problem is the same. Thanks for looking into it.

[jpuri]

Hi @jon-armstrong ,

I could replicate and check the scroll issue you are mentioning, but the way scrolling is currently implemented in grid, fixing this issue will be bigger task.

You can use the upward and downward arrows for scrolling, I checked they are working correctly.
Will that siffice for your requirement ?

[jon-armstrong-zz]

@jpuri,

I did notice that the scrollbar controls still work, but that probably won't work for end users who will expect the scroll wheel to work the same as everywhere else. I'd still like to see this fixed, but have redesigned the data presentation into two tables instead of using expandable rows.

[jpuri]

@jon-armstrong , I am looking at this issue, I will update you in 1-2 days.

[jpuri]

Apparently the scroll event getting propagated to parent grid and its starts scrolling. Scroll event can not be cancelled nor can we stop its propagation.

The default behavior of browsers to not to scroll the parent until child is totally scrolled (is at topmost or bottommost position). But ui-grid is not using default scrolling provided by browsers, but has rather implemented its own (for performance reasons).

@c0bra , can you suggest something to fix this.

[devakone]

Experiencing the same issue.

[c0bra]

All,

I don't have a solution off the top of my head. Obviously we need to somehow prevent the parent grid from receiving the bubbled-up scroll event. Are we sure can we not prevent propagation? The grid already doesn't seem to bubble the event up to the parent document and allow scroll events from inside the viewport to scroll the document.

[jpuri]

Hey @c0bra, scroll is Non-Cancelable: https://developer.mozilla.org/en-US/docs/Web/Events/scroll

The way browsers implement scrolling is that parent element does not scroll until child is fully scrolled and reaches its top or bottom. But its tough for us to implement it in this way because for its Non-Cancelable nature.

[jpuri]

We can probably check something like mousewheel event, I found this event fixing the issue to some extent.
But it is not a standard event and thus not dependable thing: https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel

[cyates81]

I am experiencing the same issue. I would like for my expandable row to scroll when the content inside of it is too large to fit within expandableRowHeight. Setting overflow-y: scroll; doesn't work like it should because of this event propagation issue.

Anybody have any other ideas to get this to work? Thanks.