ng-grid and scrolling

[Caleb Olin]

It looks like ng-grid waits to append rows to the DOM until a scroll event happens:

http://jsfiddle.net/Wwnea/2/

Is there any way to override this behavior, and simply have all the rows in the DOM when the data are loaded? 

[Tim Sweet]

There is an option in 2.0 beta that is 'virtualizationThreshold.' Its an integer value that dictates how many rows have to be there before virtualization turns on. The default is 50.

[Caleb Olin]

Thanks Tim. I really appreciate your work on this and I look forward to 2.0!

This came up because my client wants to use a custom scrollbar for the viewport. I've experimented with several jQuery plugins and all of them seem to override the native scrollbar events. This means that when the grid is scrolled, the extra items do not get appended to the DOM. The custom scrollbar is a must-have for the client, so it looks like I'm going to have to find a different grid solution. Needless to say, I'm not thrilled about that! :)

Here's a fiddle that shows what I mean:

http://jsfiddle.net/a7JLa/1/

Has anyone else been able to use a scrollbar plugin with ngGrid? Maybe I just haven't found the right one (fingers crossed).

Caleb

[Leon Revill]

This is exactly the same issue I am up against at the moment, did you ever find a solution for this?

I will update with anything I find as I am determined to use the ngGrid with a custom scroll bar :)

Leon.

[Leon Revill]

I have found a dirty "hack" which appears to solve the issue, however it is not very flexible.

On line 2745 of ng-grid.js there is the following:

$scope.adjustScrollTop(scrollTop);

scrollTop is the top position of the scrollbar, as the jQuery custom scroll bar plugins do not use the actual scoll bar this will remain at 0.

The dirty fix is to just replace "scrollTop" with a static value such as 10, so:

$scope.adjustScrollTop(10);

Which then increases the position by 10 each time, this is working with the scrollPane plugin.

I hope someone can come up with a better solution that this! I have tried moving the original scroll bar based on events fired by the scroll bar plugin but to no avail.

Bets of luck!

Leon.

[Caleb Olin]

Thanks Leon. I ended up rolling my own grid directive instead of using ngGrid. There were several reasons for this, not just the scrolling. For one thing, ngGrid has way more features than I really needed, at least for this iteration of our product.

[Mforce]

Try using $timeout when you update the content of your datasource, that worked for me.

[Mizanur Rahman Khan]

your hitted on the right point, but the hack will not work in all case, it will just work on first update.

$scope.adjustScrollTop() function first checks if the position of scrolltop is changed. if false it will not render new rows.

see the inner code of that function:

    $scope.adjustScrollTop = function(scrollTop, force) {

        if (self.prevScrollTop === scrollTop && !force) {

            return;

        }

    ...

    ...

if you replace "scrollTop" with a static value such as 10, so:

$scope.adjustScrollTop(10); 

on first call it will see the scrolltop is changed from 0 to 10, and render new rows. but from later on it will not work since scrolltop's old value and new value both are 10 now.

the easy and proper hack will be to call this function with optional param 'force' to true. 

like this:
   $scope.adjustScrollTop(scrollTop,true);

then always it will render new rows and should serve the purpose

thanks

-Mizan

[Mizanur Rahman Khan]

You can hack the ng grid library by changing this line at ngViewport directives scrollbinding function.

ngGridDirectives.directive('ngViewport', [function() {

    return function($scope, elm) {

        .....

        elm.bind('scroll', function(evt) {

            .....

            $scope.adjustScrollTop(scrollTop);

           .....

change the line:

  $scope.adjustScrollTop(scrollTop);

to this:

   $scope.adjustScrollTop(scrollTop,true);

and it will work.

[Mizanur Rahman Khan]

your hitted on the right point, but the hack will not work in all case, it will just work on first update.

$scope.adjustScrollTop() function first checks if the position of scrolltop is changed. if false it will not render new rows.

see the inner code of that function:

    $scope.adjustScrollTop = function(scrollTop, force) {

        if (self.prevScrollTop === scrollTop && !force) {

            return;

        }

    ...

    ...

if you replace "scrollTop" with a static value such as 10, so:

$scope.adjustScrollTop(10); 

on first call it will see the scrolltop is changed from 0 to 10, and render new rows. but from later on it will not work since scrolltop's old value and new value both are 10 now.

the easy and proper hack will be to call this function with optional param 'force' to true. 

like this:
   $scope.adjustScrollTop(scrollTop,true);

then always it will render new rows and should serve the purpose

thanks

-Mizan

On Friday, April 12, 2013 4:38:40 PM UTC+6, Leon Revill wrote:

[Ajay Agrahari]

Is there any other way rather than hacking ng-grid.js file?