From 09f478c2af4a5f47f8b144484fe71b96f62aa64b Mon Sep 17 00:00:00 2001
From: Brian Hann <c0bra@users.noreply.github.com>
Date: Mon, 23 Feb 2015 13:07:36 -0600
Subject: [PATCH] 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
---
 src/js/core/directives/ui-grid-viewport.js    | 30 ++++++++++++++++++-
 src/js/core/directives/ui-pinned-container.js |  2 ++
 src/js/core/factories/GridRenderContainer.js  | 25 ----------------
 src/templates/ui-grid/uiGridViewport.html     |  2 +-
 4 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/src/js/core/directives/ui-grid-viewport.js b/src/js/core/directives/ui-grid-viewport.js
index fe19eec7fd..5db29e0565 100644
--- 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
index c55f0e6ed0..3ff5fd1b1f 100644
--- 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
index f726b3203a..aa331cd881 100644
--- 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
index 0213bc53a3..97c4ba206a 100644
--- 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>