Skip to content

Commit

Permalink
fix(Pinning): Move rowStyle() to uiGridViewport
Browse files Browse the repository at this point in the history
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
  • Loading branch information
c0bra committed Feb 23, 2015
1 parent d841b92 commit 09f478c
Show file tree
Hide file tree
Showing 4 changed files with 32 additions and 27 deletions.
30 changes: 29 additions & 1 deletion src/js/core/directives/ui-grid-viewport.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
return {
replace: true,
scope: {},
controllerAs: 'Viewport',
templateUrl: 'ui-grid/uiGridViewport',
require: ['^uiGrid', '^uiGridRenderContainer'],
link: function($scope, $elm, $attrs, controllers) {
Expand Down Expand Up @@ -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;
};
}]
};
}
]);
Expand Down
2 changes: 2 additions & 0 deletions src/js/core/directives/ui-pinned-container.js
Original file line number Diff line number Diff line change
@@ -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',
Expand Down
25 changes: 0 additions & 25 deletions src/js/core/factories/GridRenderContainer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
2 changes: 1 addition & 1 deletion src/templates/ui-grid/uiGridViewport.html
Original file line number Diff line number Diff line change
@@ -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>
Expand Down

0 comments on commit 09f478c

Please sign in to comment.