AddRowHeader causes grid misalignment #3050
Description
When you use addRowHeader in conjunction with pinning and/or selection, you can get into situations where the grid doesn't render correctly. It looks like the width of the left render container is being incorrectly calculated.
There are probably workarounds by calling refresh or handleWindowResize (and in my real application, expanding a grouped row does it), but the point is that we shouldn't need to.
I think this may be a test case that will inform our grid refresh refactoring (if we ever do that), refer http://ui-grid.info/docs/#/api/design-rendering-cycle.
I will attach a plunker when plunker decides it'd like to start saving again. Until then the app.js and index.html are here so I can recreate later.
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<button ng-click="addRowHeader()">AddRowHeader</button>
<div ui-grid="gridOptions" class="grid" ui-grid-pinning ui-grid-selection></div>
</div>
<script src="app.js"></script>
</body>
</html>
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pinning', 'ui.grid.selection']);
app.controller('MainCtrl', ['$scope', '$http', '$log', '$timeout', function ($scope, $http, $log, $timeout) {
$scope.gridOptions = {
onRegisterApi: function(gridApi){ $scope.gridApi = gridApi; }
};
$scope.gridOptions.columnDefs = [
{ name:'id', width:50, enablePinning:false },
{ name:'name', width:100, pinnedLeft:true },
{ name:'age', width:100, pinnedRight:true },
{ name:'address.street', width:150 },
{ name:'address.city', width:150 },
{ name:'address.state', width:50 },
{ name:'address.zip', width:50 },
{ name:'company', width:100 },
{ name:'email', width:100 },
{ name:'phone', width:200 },
{ name:'about', width:300 },
{ name:'friends[0].name', displayName:'1st friend', width:150 },
{ name:'friends[1].name', displayName:'2nd friend', width:150 },
{ name:'friends[2].name', displayName:'3rd friend', width:150 },
];
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
$scope.addRowHeader = function() {
if( !$scope.rowAdded ){
$scope.gridApi.core.addRowHeaderColumn( { name: 'test' } );
$timeout(function() {
$scope.gridApi.core.refresh();
$timeout(function() {
$scope.gridApi.core.refresh();
});
});
$scope.rowAdded = true;
}
}
}]);