I'm having an issue where filtering in a ui-grid causes the column widths to be reset. I've saved grid state to local storage, and the issue only occurs on the first load, before any columns have been manually resized. After a column has been manually resized, filtering no longer causes the column width to be reset.
Plinker here: http://plnkr.co/edit/LAMZvOkpx6jsD4CWSz04?p=preview
(also referenced in this post: angular ui grid save and restore state)
'use strict';
angular.module('grid-demo', [
'LocalStorageModule',
'ui.grid',
'ui.grid.selection',
'ui.grid.resizeColumns',
'ui.grid.autoResize',
'ui.grid.moveColumns',
'ui.grid.grouping',
'ui.grid.saveState',
])
.config(function ($httpProvider, localStorageServiceProvider) {
localStorageServiceProvider
.setPrefix('grid-demo')
.setStorageType('localStorage')
.setNotify(true, true); // Not sure what this setting does
})
.controller('MainCtrl', function ($rootScope, $scope, $http, $window, $timeout, uiGridConstants, localStorageService) {
$scope.gridOptions = {
data: [
{ name: 'Jack', title: 'manager', phone: '123456789', location: 'india'},
{ name: 'Suzy', title: 'developer', phone: '465189798', location: 'usa'},
{ name: 'George', title: 'secretary', phone: '82656517', location: 'japan'},
{ name: 'Michael', title: 'analyst', phone: '31321687', location: 'egypt'},
{ name: 'Sara', title: 'consultant', phone: '59595847', location: 'germany'},
{ name: 'Chris', title: 'engineer', phone: '789456123', location: 'russia'},
{ name: 'Elizabeth', title: 'clerk', phone: '963852741', location: 'china'},
{ name: 'Jane', title: 'intern', phone: '147258369', location: 'australia'},
{ name: 'Bill', title: 'accountant', phone: '951487623', location: 'brazil'}
],
columnDefs: [
{ name: 'name' },
{ name: 'title' },
{ name: 'phone' },
{ name: 'location' }
],
enableGridMenu: true,
enableRowSelection: true,
enableRowHeaderSelection: false,
enableColumnResizing: true,
enableColumnReordering: true,
enableFiltering: true,
onRegisterApi: function(gridApi) {
// Keep a reference to the gridApi.
$scope.gridApi = gridApi;
// Setup events so we're notified when grid state changes.
$scope.gridApi.colMovable.on.columnPositionChanged($scope, saveState);
$scope.gridApi.colResizable.on.columnSizeChanged($scope, saveState);
$scope.gridApi.grouping.on.aggregationChanged($scope, saveState);
$scope.gridApi.grouping.on.groupingChanged($scope, saveState);
$scope.gridApi.core.on.columnVisibilityChanged($scope, saveState);
$scope.gridApi.core.on.filterChanged($scope, saveState);
$scope.gridApi.core.on.sortChanged($scope, saveState);
// Restore previously saved state.
restoreState();
}
};
function saveState() {
var state = $scope.gridApi.saveState.save();
localStorageService.set('gridState', state);
}
function restoreState() {
$timeout(function() {
var state = localStorageService.get('gridState');
if (state) $scope.gridApi.saveState.restore($scope, state);
});
}
});
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
<script src="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.6/ui-grid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-local-storage/0.2.2/angular-local-storage.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.6/ui-grid.min.css"/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div ng-app="grid-demo" ng-controller="MainCtrl">
<div ui-grid="gridOptions"
ui-grid-selection
ui-grid-resize-columns
ui-grid-auto-resize
ui-grid-move-columns
ui-grid-grouping
ui-grid-save-state>
</div>
</div>
</body>
</html>
Steps to reproduce:
- Load the plinker
- change a column's width
- hit the little refresh button on the html preview (right side of plinker)
- note that your column width change has been saved
- click into any filter field and start typing
- note that the columns widths are reset
It really appears that the filterChange event in ui-grid is notifying the grid to refresh, and once it does, it reloads from the original column definitions. However, I'm at a loss for find a way to prevent this.
Any suggestions would be warmly welcomed!
