Angular UI-Grid reused grid not resetting scroll + infinite scroll not working

Question

I’m using UI-Grid (http://ui-grid.info/docs/ ) angular plugin for displaying data but have noticed a few quirks which I have been unable to solve or find anything about.

I have a search form with some parameters in, i click search and then it queries the database and returns results which are put into this grid. I do a search, look at the data/scroll etc, then do another search. The data in the grid is wiped and the new data put in. (I.e. using same grid) - from this I notice 2 problems:

1) When I perform a second database search the scroll position does not reset to the top – and without using a new directive (cellNav) to scrollTo, I don’t know how.

2) Similar to this, infinite scrolling seems to stop working when you do a new search.

To resolve both of these problems I would have thought I need to simply refresh the grid…but I can’t find how. Any suggestions please?

There are some definite quirks still with ui-grid. I had similar problems and found that resizing the grid often helped. I just made a resizegrid method that calculated the size based on the number of items and then set it. — Scott
– Scott, Commented Feb 20, 2015 at 18:51

Phil · Accepted Answer · 2015-02-23 13:38:16Z

Okay I found a solution...

I recreate the DOM element every time. First I remove the element - making sure to destroy the isolate scope to avoid directive watcher null point exceptions.

if(document.getElementById('searchGrid')) {
    $scope.element = angular.element(document.getElementById('searchGrid'));
    var isolate = $scope.element.isolateScope();
    isolate.$destroy();
    if($scope.element) $scope.element.remove();
  }

Next, create your element and use $compile to convert it to angular element and create the directives etc:

  var newDirective = angular.element('<div id="searchGrid" ui-grid=\"gridOptions\" ui-grid-infinite-scroll ui-grid-auto-resize ui-grid-move-columns ui-grid-resize-column ng-style=\"{ \'height\' : height }\" ng-show=\"gridLoaded &amp;&amp; !gridLoading\"></div>');
  var element = angular.element(document.getElementById('myGrid'));
  element.append(newDirective);
  $compile(newDirective)($scope);

Note myGrid is just an empty div so I can add searchGrid div to.

Doesn't seem like the most elegent solution - surely there's something in UI-GRID (or at least, should be) that cleans up a grid to allow it to be reused. But it works nonetheless.

Collectives™ on Stack Overflow

Angular UI-Grid reused grid not resetting scroll + infinite scroll not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related