grid flickering when auto-resize feature is used with the selection header

[yurigenin]

Here is plunker that you need to run in a separate window view to see the issue.

The problem is due to the 'body' container 'div' to bump into the 'left' container and browser layout engine forcing it down which causes a flicker until auto-resize timer corrects it by recalculating the sizes.

Im my app I fixed it by using this style:
.ui-grid-render-container.ui-grid-render-container-body { left: 30px; top: 0; position: absolute; }

Plunker (please run in a separate window)

You may want to look into this idea of using 'absolute' positions instead and just calculate offsets and set them as styles in your buildStyle() method.

[AdityaJitu]

Hi @PaulL1 ,
I also agree with @yurigenin .
When I use ui-grid-auto-resize or even if I do not use this attribute, still you will see rows getting painted from left to right.
This usually occurs when the grid contains large amount of data & I try to switch tabs with ui-gid in each tab

.

As of now we are using
ui-grid - v3.0.0-RC.18-92a8836 - 2014-12-25

[PaulL1]

Are you using ng-if on the tabs, or are you trying to have all the grids rendering at the same time?

[AdityaJitu]

@PaulL1 yes...& the tabs are rendered using ng-repeat..

[AdityaJitu]

Hi @PaulL1 ,
I would like to say that we are not using ng-if while switching tabs. The flickering issue/ or the columns getting painted from left to right stops when I remove ui-grid-auto-resize .
I followed this url which provided me a broader picture.
http://ui-grid.info/docs/#/tutorial/108_hidden_grids

(Very nicely written though)

[PaulL1]

In my own application I don't use auto-resize. What I'm doing instead is to use an angular service that watches the page size, and only triggers are grid resize if the page size has actually changed. I've been meaning to take a look at auto-resize to see if I can apply that logic there. You still get a digest with each timeout, but you don't get a full redraw with each timeout.

The logic I have is basically:

angular.module( 'common.gridSize', [
])
/**
 * @ngdoc service
 * @name common.gridSize
 * @description Validates the grid size every couple of seconds, aiming to
 * get our grid to be somewhat responsive
 * 
 */

.service('GridSize', function( LoggingService, $interval, $rootScope ) {
  return {

   viewportHeight: 0,
   viewportWidth: 0,
   monitorTime: 500,     // 0.5 seconds

   /**
     * @ngdoc method
     * @methodOf common.gridSize
     * @name getViewportSize
     * @description
     * 
     * @returns {boolean} whether or not the size is different than before
     */
    getViewportSize: function() {
      var w = window;
      var d = document;
      var e = d.documentElement;
      var g = d.body;
      var width = w.innerWidth || e.clientWidth || g.clientWidth;
      var height = w.innerHeight|| e.clientHeight|| g.clientHeight;
      var changed = false;

      if( width !== this.viewportWidth ){
        this.viewportWidth = width;
        changed = true;
      }

      if( height !== this.viewportHeight ){
        this.viewportHeight = height;
        changed = true;
      }

      return changed;
    },


   /**
     * @ngdoc method
     * @methodOf common.gridSize
     * @name getListHeight
     * @description  Get the height we want our grid when it's in a list, given
     * the viewport height
     * @param {$scope} $scope the $scope of the list controller, has mode on it
     * @returns {number} height in pixels
     */
    getListHeight: function( $scope ){
      if( $scope.mode === 'list' ){
        return this.viewportHeight - 110;
      } else if( $scope.mode === 'tab' ){
        return parseInt(this.viewportHeight * 0.5, 10);
      } else if( $scope.mode == 'modal' ){
        return this.viewportHeight - 300;
      }
    },


    /**
     * @ngdoc method
     * @methodOf common.gridSize
     * @name monitorWindowSize
     * @description  A timing loop that watches the viewport size, and triggers
     * a broadcast when it changes.  Initiated by app.js.
     */
    monitorWindowSize: function(){
      LoggingService.logInfo('47004: Entering monitorWindowSize', 'GRID_SIZE', {});
      var self = this;
      $interval( function() {
        LoggingService.logInfo('47005: Monitoring WindowSize', 'GRID_SIZE', {});
        if( self.getViewportSize() ){
          self.broadcastSizeChange();
        }
      }, this.monitorTime);
    },


    /**
     * @ngdoc method
     * @methodOf common.gridSize
     * @name broadcastSizeChange
     * @description  Wrapper for broadcast of size change, just makes testing easier
     */
    broadcastSizeChange: function(){
      /**
       * @ngdoc event
       * @name emit-event-resize
       * @eventOf common.gridSize
       * @description the window has resized.
       */
      $rootScope.$broadcast('event-resize');
    },


    /**
     * @ngdoc method
     * @methodOf common.gridSize
     * @name noticeResize
     * @description  Each grid calls this to initiate a wait on any resize
     * events, and apply the new size if one happens.
     * It applies an initial size to the grid's enclosing element, and calls handleResize,
     * it then applies any updates and calls handleResize on them too
     *  
     * @param {$scope} $scope the scope to wait on, and that has our grid configuration
     * 
     */
    noticeResize: function($scope){
      LoggingService.logInfo('47001: Entering noticeResize', 'GRID_SIZE', {objectName: $scope.config.objectName, scope: $scope});

      var self = this;
      self.setSize($scope);

      if( $scope.resizeDereg ){
        $scope.resizeDereg();
      }
      var _scope = $scope;
      $scope.resizeDereg = $scope.$on('event-resize', function() {
        LoggingService.logInfo('47002: Entering event-resize', 'GRID_SIZE', {objectName: $scope.config.objectName, scope: $scope});
        self.setSize( _scope );      
      });
    },


    /**
     * @ngdoc method
     * @methodOf common.gridSize
     * @name setSize
     * @description Sets the size of the grid, based on it's attributes, and then 
     * calls handleWindowResize if available, otherwise sets an interval and tries again
     *  
     * @param {$scope} $scope the scope of the list controller
     * 
     */
    setSize: function($scope){
      if( $scope.gridApi ){
        if( $scope.mode === 'modal' ){
          $scope.gridElement = angular.element(document.getElementById('modal-list'));
        } else {
          $scope.gridElement = angular.element(document.getElementById($scope.panelName));
        }
        $scope.gridElement.css("height", this.getListHeight( $scope ) + 'px');
        $scope.gridApi.core.handleWindowResize();
      } else {
        var _scope = $scope;
        var self = this;
        $interval( function() {
          self.setSize(_scope);
        }, 500, 1);
      }
    }
  };
});

Some of the logic is particular to my use case, I have a number of controllers on each page, which can include multiple grids. Each of my list type controllers (which hold grids) basically register by calling noticeResize, and the way I name all my grids means I can wrap up all the logic of finding and resizing them into this one service - the impact on my controllers is basically only that they have to call noticeResize and pass in their scope - the rest is magic from their perspective.

I think this could be repurposed to ui-grid reasonably easily - I just need to find the time to do it.

[yurigenin]

Paul, I do not think it is a problem with auto resize. Auto resize works well in this case and does exactly what your code does. It only triggers grid refresh when grid's container changes sizes. The flickering occurs for a different reason as I explained before. When grid container changes size (becomes smaller) the render container 'body' becomes too big to fit in its allocated space and it is pushed down by the browser layout manager. It causes the flicker. Then the resize logic (yours or auto-resize) kicks in and resizes the 'body' render container so it fits in the view port again and is pushed up next to the 'left' container once again. Thus, another flicker. So, it only happens when you have a pinned 'left' container visible and when you make the grid containing div smaller (resizing the browser window, for instance).

In my own application I don't use auto-resize. What I'm doing instead is to use an angular service that watches the page size, and only triggers are grid resize if the page size has actually changed. I've been meaning to take a look at auto-resize to see if I can apply that logic there. You still get a digest with each timeout, but you don't get a full redraw with each timeout.

The logic I have is basically:
angular.module( 'common.gridSize', [
])
/**

• @ngdoc service
• @name common.gridSize
• @description Validates the grid size every couple of seconds, aiming to
• get our grid to be somewhat responsive
• */

.service('GridSize', function( LoggingService, $interval, $rootScope ) {
return {

viewportHeight: 0,
viewportWidth: 0,
monitorTime: 500, // 0.5 seconds

/**
* @ngdoc method
* @methodOf common.gridSize
* @name getViewportSize
* @description
*
* @returns {boolean} whether or not the size is different than before
*/
getViewportSize: function() {
var w = window;
var d = document;
var e = d.documentElement;
var g = d.body;
var width = w.innerWidth || e.clientWidth || g.clientWidth;
var height = w.innerHeight|| e.clientHeight|| g.clientHeight;
var changed = false;

  if( width !== this.viewportWidth ){
    this.viewportWidth = width;
    changed = true;
  }

  if( height !== this.viewportHeight ){
    this.viewportHeight = height;
    changed = true;
  }

  return changed;
},

/**
* @ngdoc method
* @methodOf common.gridSize
* @name getListHeight
* @description Get the height we want our grid when it's in a list, given
* the viewport height
* @param {$scope} $scope the $scope of the list controller, has mode on it
* @returns {number} height in pixels
*/
getListHeight: function( $scope ){
if( $scope.mode === 'list' ){
return this.viewportHeight - 110;
} else if( $scope.mode === 'tab' ){
return parseInt(this.viewportHeight * 0.5, 10);
} else if( $scope.mode == 'modal' ){
return this.viewportHeight - 300;
}
},

/**
 * @ngdoc method
 * @methodOf common.gridSize
 * @name monitorWindowSize
 * @description  A timing loop that watches the viewport size, and triggers
 * a broadcast when it changes.  Initiated by app.js.
 */
monitorWindowSize: function(){
  LoggingService.logInfo('47004: Entering monitorWindowSize', 'GRID_SIZE', {});
  var self = this;
  $interval( function() {
    LoggingService.logInfo('47005: Monitoring WindowSize', 'GRID_SIZE', {});
    if( self.getViewportSize() ){
      self.broadcastSizeChange();
    }
  }, this.monitorTime);
},


/**
 * @ngdoc method
 * @methodOf common.gridSize
 * @name broadcastSizeChange
 * @description  Wrapper for broadcast of size change, just makes testing easier
 */
broadcastSizeChange: function(){
  /**
   * @ngdoc event
   * @name emit-event-resize
   * @eventOf common.gridSize
   * @description the window has resized.
   */
  $rootScope.$broadcast('event-resize');
},


/**
 * @ngdoc method
 * @methodOf common.gridSize
 * @name noticeResize
 * @description  Each grid calls this to initiate a wait on any resize
 * events, and apply the new size if one happens.
 * It applies an initial size to the grid's enclosing element, and calls handleResize,
 * it then applies any updates and calls handleResize on them too
 *  
 * @param {$scope} $scope the scope to wait on, and that has our grid configuration
 * 
 */
noticeResize: function($scope){
  LoggingService.logInfo('47001: Entering noticeResize', 'GRID_SIZE', {objectName: $scope.config.objectName, scope: $scope});

  var self = this;
  self.setSize($scope);

  if( $scope.resizeDereg ){
    $scope.resizeDereg();
  }
  var _scope = $scope;
  $scope.resizeDereg = $scope.$on('event-resize', function() {
    LoggingService.logInfo('47002: Entering event-resize', 'GRID_SIZE', {objectName: $scope.config.objectName, scope: $scope});
    self.setSize( _scope );      
  });
},


/**
 * @ngdoc method
 * @methodOf common.gridSize
 * @name setSize
 * @description Sets the size of the grid, based on it's attributes, and then 
 * calls handleWindowResize if available, otherwise sets an interval and tries again
 *  
 * @param {$scope} $scope the scope of the list controller
 * 
 */
setSize: function($scope){
  if( $scope.gridApi ){
    if( $scope.mode === 'modal' ){
      $scope.gridElement = angular.element(document.getElementById('modal-list'));
    } else {
      $scope.gridElement = angular.element(document.getElementById($scope.panelName));
    }
    $scope.gridElement.css("height", this.getListHeight( $scope ) + 'px');
    $scope.gridApi.core.handleWindowResize();
  } else {
    var _scope = $scope;
    var self = this;
    $interval( function() {
      self.setSize(_scope);
    }, 500, 1);
  }
}

};
});

Some of the logic is particular to my use case, I have a number of controllers on each page, which can include multiple grids. Each of my list type controllers (which hold grids) basically register by calling noticeResize, and the way I name all my grids means I can wrap up all the logic of finding and resizing them into this one service - the impact on my controllers is basically only that they have to call noticeResize and pass in their scope - the rest is magic from their perspective.

I think this could be repurposed to ui-grid reasonably easily - I just need to find the time to do it.

—
Reply to this email directly or view it on GitHub.

[AshwiniAJadhav]

Hi yurigenin ,
did you find any solution on this?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically closed because it has not had recent activity. If you believe that this is still an issue in the latest version, feel free to re-open it. Thank you for your contributions.