Skip to content

AddRowHeader causes grid misalignment #3050

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
PaulL1 opened this issue Mar 18, 2015 · 2 comments · Fixed by #3145
Closed

AddRowHeader causes grid misalignment #3050

PaulL1 opened this issue Mar 18, 2015 · 2 comments · Fixed by #3145
Assignees
@PaulL1
Labels
Hi-Pri Bug
Milestone
3.0

Comments

@PaulL1
Copy link
Contributor

PaulL1 commented Mar 18, 2015

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;
    } 
  }
}]);
@PaulL1 PaulL1 added this to the 3.0 milestone Mar 18, 2015
@PaulL1 PaulL1 self-assigned this Mar 18, 2015
@novice3030
Copy link
Contributor

@PaulL1 I also encountered this issue.
I managed to get it "working" by adding the row header before ajax calls to load the grid columns/data
But this should still be fixed

This was referenced Mar 22, 2015
Closed
Closed
@PaulL1
Copy link
Contributor Author

PaulL1 commented Mar 26, 2015

Moved this into the plunker: http://plnkr.co/edit/leP2x2FanozxMOD7grhF?p=preview

@PaulL1 PaulL1 mentioned this issue Mar 26, 2015
Open
PaulL1 added a commit to PaulL1/ng-grid that referenced this issue Mar 28, 2015
@PaulL1
Refactor(styleComputations): fixes rendercontainer rendering problems
b3a530d 
Change the style computations with the aim of making them deterministic
and able to calculate widths in a single pass rather than being iterative.

Fix angular-ui#3050, and somewhat improves angular-ui#1957, at least to my eye.

Changes are:
- change renderContainer updateColumnWidths to calculate across all
  visible columsn in all render containers, rather than trying to calculate
  one render container at a time (cannot otherwise work with * and %, these are of
  the whole grid, not just one render container)
- change header updateColumnWidths to just rely on the renderContainer, not
  do it again itself in a slightly different way
- change updateColumnWidths to be simpler, and to calculate percentages in a way
  that I think makes more sense
- change resize feature to not attempt to 'resizeAround' the changed column, but
  rather allow updateColumnWidths to deal with it
- change pinning to not call refresh twice when moving a column, this is now
  unnecessary
- updates to tutorials
@PaulL1 PaulL1 mentioned this issue Mar 28, 2015
Merged
@c0bra c0bra removed the in progress label Mar 28, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@PaulL1 PaulL1

Labels
Hi-Pri Bug
Projects
None yet
Milestone
3.0
Development

Successfully merging a pull request may close this issue.

Refactor(styleComputations): fixes rendercontainer rendering problems PaulL1/ng-grid
3 participants
@c0bra @PaulL1 @novice3030