Column width doesn't change

[roedit]

var columnDefs1 = [
{ name: 'firstName', width: 100 }
];
var columnDefs2 = [
{ name: 'firstName', width: 200 }
];
Switching beetween the 2 definitions for the grid the width for the "name" column doesn't change.
here is the plnkr:
http://plnkr.co/edit/Q3BYbb3fIHVgDVkKF4Tl?p=preview
Please hit swap data and you will notice that the gender company is changed to employed, but the column width is the same.

[PaulL1]

This is probably another example of a problem we have where we don't detect that the column has changed, so we don't re-copy the columnDef down (we assume the user might have changed the width manually, maybe using resizeColumns, so we don't overwrite).

One workaround is to empty the columnDefs, wait for a digest, then put the new ones in.
http://plnkr.co/edit/hYGggNUfMKZtYH98R3Rc?p=preview

[roedit]

I have implemented the workaround that you suggested but there's a pretty ugly glitch.
http://screencast.com/t/iUjXNtysAb
Here is an example with a simple one, if i have more columns the glitch is even uglier.
I wonder if there isn't a "flag" that we could change when we modify the column definition so that the grid could target the column definition change and update to the latest version ?
Thanks

[PaulL1]

Alternatively, you can directly set the column.width (rather than columnDef.width), that will apply immediately.

[roedit]

Yes, this is a workaround that solves the width problem. But there are a few more problems as it would be the column order, the column sort direction.
The main issue i think is that the grid doesn't detect the columnDef change.

[PaulL1]

columnDef changes can be notified through notifyDataChange.

[iorzetic]

I just tried using the notifyDataChange with both uiGridConstants.dataChange.COLUMN and uiGridConstants.dataChange.ALL and I can confirm that it doesn't work for the setup that we have. It doesn't change the following aspects (at least): column widths and pinning of the column.

[PaulL1]

By design neither column widths nor pinning gets overwritten from the columnDefs onto the columns once the user has had a chance to alter them. We run a grid refresh in lots of places, including sometimes during scrolling, column moves, and a bunch of other actions. If each of those actions reset the column width to the default (perhaps after the user has already changed it to suit themselves) it would be very annoying for them.

For pinning I think there is an API you can use to pin columns programatically, for column width you need to set the column.width directly.

[iorzetic]

I understand that you cannot just refresh the grid at any point, that's very good. What we are trying to do is to replace the columns definitions completely, including grid data. The problem is that usually, the columns definitions are similar with a few small exceptions: some columns might not be present, some might have their order switched, some might have another sorting direction set or some may be pinned.
We can do a complete clean-up of the columns definitions but that results in an ugly redrawing time when switching between definitions. Without that redraw, everything looks fine, some aspects of the grid are changed like hidden or visible columns, order inside the column. But some of the aspects like column width and pinning don't get changed.

[PaulL1]

It should notice the change so long as the objects change - at present the columnDef watch is implemented as follows in ui-grid.js:

deregFunctions.push( $scope.$parent.$watchCollection(function() { return $scope.uiGrid.columnDefs; }, columnDefsWatchFunction) );

So it should notice any columnDef whose reference changes.

The columnDefsWatchFunction in turn is:

      function columnDefsWatchFunction(n, o) {
        if (n && n !== o) {
          self.grid.options.columnDefs = n;
          self.grid.buildColumns({ orderByColumnDefs: true })
            .then(function(){

              self.grid.preCompileCellTemplates();

              self.grid.callDataChangeCallbacks(uiGridConstants.dataChange.COLUMN);
            });
        }
      }

So that's going to call buildColumns.

That in turn is in Grid.js, and it looks to match columnDefs by name.

So, if I wanted to have a decent go at the grid noticing my columnDefs changes, and giving me new columns with new configuration and dropping my old ones, I'd:

1. Make all my columnDefs be new objects - so if you're using the old ones but tweaking them, I'd angular.copy them first - something like

var newColumnDefs = angular.copy($scope.gridOptions.columnDefs);
$scope.gridOptions.columnDefs = newColumnDefs;

1. Give them all new names. You can keep the old fields, and keep the old displayNames, but give the columns themselves new names and the grid will think they're new columns.

[iorzetic]

Thanks for the suggestions Paul.
We do reset the columnDefs array completely each time we do this:

scope.gridOptions.columnDefs = [];

And then we start pushing into this new array the new columns based on our definition for the columns. Somehow this does not trigger the proper watchers. We do not change the names for the columns though, it would not be possible to correlate with the data if we do that.