CODEWITHSUNDEEP
javascriptangularjsgrid
Phil
Phil

Reputation: 494

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

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?

Upvotes: 2

Views: 1469

Answers (1)

Phil
Phil

Reputation: 494

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.

Upvotes: 1

Related Questions