fix(Pinning): Move rowStyle() to uiGridViewport

rowStyle() in GridRenderContainer was setting both row AND column offsets. The problem with that is pinned containers reference a different render container for their rows than their columns. Using the column margin-offset from the body container resulted in render issues. This change moves the rowStyle() function to uiGridViewport's controller, and it uses the rowContainer for the row offset and the colContainer for the column offset. Fixes #2821
angular-ui · Feb 23, 2015 · 09f478c · 09f478c
1 parent d841b92
commit 09f478c
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 27 deletions.
diff --git a/src/js/core/directives/ui-grid-viewport.js b/src/js/core/directives/ui-grid-viewport.js
@@ -6,6 +6,7 @@
       return {
         replace: true,
         scope: {},
+        controllerAs: 'Viewport',
         templateUrl: 'ui-grid/uiGridViewport',
         require: ['^uiGrid', '^uiGridRenderContainer'],
         link: function($scope, $elm, $attrs, controllers) {
@@ -86,7 +87,34 @@
               }
               scrollEvent.fireScrollingEvent();
           });
-        }
+        },
+        controller: ['$scope', function ($scope) {
+          this.rowStyle = function (index) {
+            var rowContainer = $scope.rowContainer;
+            var colContainer = $scope.colContainer;
+
+            var styles = {};
+
+            if (index === 0 && rowContainer.currentTopRow !== 0) {
+              // The row offset-top is just the height of the rows above the current top-most row, which are no longer rendered
+              var hiddenRowWidth = (rowContainer.currentTopRow) * rowContainer.grid.options.rowHeight;
+
+              // return { 'margin-top': hiddenRowWidth + 'px' };
+              styles['margin-top'] = hiddenRowWidth + 'px';
+            }
+
+            if (colContainer.currentFirstColumn !== 0) {
+              if (colContainer.grid.isRTL()) {
+                styles['margin-right'] = colContainer.columnOffset + 'px';
+              }
+              else {
+                styles['margin-left'] = colContainer.columnOffset + 'px';
+              }
+            }
+
+            return styles;
+          };
+        }]
       };
     }
   ]);

diff --git a/src/js/core/directives/ui-pinned-container.js b/src/js/core/directives/ui-pinned-container.js
@@ -1,6 +1,8 @@
 (function(){
   'use strict';
 
+  // TODO: rename this file to ui-grid-pinned-container.js
+
   angular.module('ui.grid').directive('uiGridPinnedContainer', ['gridUtil', function (gridUtil) {
     return {
       restrict: 'EA',

diff --git a/src/js/core/factories/GridRenderContainer.js b/src/js/core/factories/GridRenderContainer.js
@@ -493,31 +493,6 @@ angular.module('ui.grid')
     this.setRenderedColumns(columnArr);
   };
 
-  GridRenderContainer.prototype.rowStyle = function (index) {
-    var self = this;
-
-    var styles = {};
-
-    if (index === 0 && self.currentTopRow !== 0) {
-      // The row offset-top is just the height of the rows above the current top-most row, which are no longer rendered
-      var hiddenRowWidth = (self.currentTopRow) * self.grid.options.rowHeight;
-
-      // return { 'margin-top': hiddenRowWidth + 'px' };
-      styles['margin-top'] = hiddenRowWidth + 'px';
-    }
-
-    if (self.currentFirstColumn !== 0) {
-      if (self.grid.isRTL()) {
-        styles['margin-right'] = self.columnOffset + 'px';
-      }
-      else {
-        styles['margin-left'] = self.columnOffset + 'px';
-      }
-    }
-
-    return styles;
-  };
-
   GridRenderContainer.prototype.headerCellWrapperStyle = function () {
     var self = this;
 

diff --git a/src/templates/ui-grid/uiGridViewport.html b/src/templates/ui-grid/uiGridViewport.html
@@ -1,6 +1,6 @@
 <div class="ui-grid-viewport"  ng-style="colContainer.getViewPortStyle()">
   <div class="ui-grid-canvas">
-    <div ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index" class="ui-grid-row" ng-style="rowContainer.rowStyle(rowRenderIndex)">
+    <div ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index" class="ui-grid-row" ng-style="Viewport.rowStyle(rowRenderIndex)">
       <div ui-grid-row="row" row-render-index="rowRenderIndex"></div>
     </div>
   </div>