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

Author: c0bra

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;
+          };
+        }]
       };
     }
   ]);

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',

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;
 

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>