Skip to content

AddRowHeader causes grid misalignment #3050

Closed
@PaulL1

Description

@PaulL1

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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions