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.

[ValentinH]

I have noticed this problem in the Expendable tutorial. What is the status?

The strange thing is that the child scroll only works as expected if the parent is not scrolled at all. Is it something that was already improved compared to the problem explained in this issue or that was already the behaviour at the time this issue has been filled?

[josephaanthony]

There is another issue with expandable. The expandable demo is broken too. When you do a expand all. The selection gets misalligned. The biggest problem is, if you scroll to the bottom, it even fails to render the last few rows and leaves a lot of empty spaces inside the grid. Any hint on what could be the issue. I am happy to fix the expandable grid

[tomerz012]

I had the same issue, I fixed it by setting the expandableRowHeight to high number (400)

[s4253]

Hello all, is this issue still not resolved ? I observe similar issue with huge space at the end of the table if i scroll down table with one or two rows expanded. Is there any bug opened for it or maybe even close ?

[dwdbk]

Hello everyone, I had the same issue but i fixed it by setting the expandableRowHeight to => (number of lines to display +1 ) * rowHeight

[jcubic]

The problem is in scroll wheel this is workaround/hack:

/*
 * this file is fix for long standing bug in ui-grid
 * https://github.com/angular-ui/ui-grid/issues/2162
 */
(function () {
    'use strict';

    angular
        .module('divosUiApp.widget.grid')
        .directive('wheelFix', wheelFix);

    function wheelFix() {
      return {
        restrict: 'A',
        link: function link($scope, $element) {
          var $container = $element.find('.ui-grid-render-container');
          // wait for rendering of ui-grid
          if (!$container.length) {
            setTimeout(link.bind(this, $scope, $element), 400);
          }
          // code copied from $destroy in ui-grid source code
          ['wheel', 'mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'].forEach(function(event) {
            $container.off(event);
          });
        }
      }
    }
})();

and this directive to ui-grid element it will remove mousewheel handler, I don't think it's needed (the event).

<div wheel-fix ui-grid="gridOptions"></div>

I have same code (custom mousewheel) in my project jQuery Terminal that was started in 2011, I didn't removed that code from the library though. but user can disable it (by setting his own handler) and he can scroll the output of the terminal.

If you want to fix this bug, it's somewhere in mouse wheel logic ui-grid-render-container.js#L67 but I would just remove it, if it just scroll the view, unless it do some other logic.

[ghost]

Tried it with ui-grid v 4.4.x, and it solves this problem.

Thank you jcubic!

The problem is in scroll wheel this is workaround/hack:

/*
 * this file is fix for long standing bug in ui-grid
 * https://github.com/angular-ui/ui-grid/issues/2162
 */
(function () {
    'use strict';

    angular
        .module('divosUiApp.widget.grid')
        .directive('wheelFix', wheelFix);

    function wheelFix() {
      return {
        restrict: 'A',
        link: function link($scope, $element) {
          var $container = $element.find('.ui-grid-render-container');
          // wait for rendering of ui-grid
          if (!$container.length) {
            setTimeout(link.bind(this, $scope, $element), 400);
          }
          // code copied from $destroy in ui-grid source code
          ['wheel', 'mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'].forEach(function(event) {
            $container.off(event);
          });
        }
      }
    }
})();

and this directive to ui-grid element it will remove mousewheel handler, I don't think it's needed (the event).

<div wheel-fix ui-grid="gridOptions"></div>

I have same code (custom mousewheel) in my project jQuery Terminal that was started in 2011, I didn't removed that code from the library though. but user can disable it (by setting his own handler) and he can scroll the output of the terminal.

If you want to fix this bug, it's somewhere in mouse wheel logic ui-grid-render-container.js#L67 but I would just remove it, if it just scroll the view, unless it do some other logic.