diff --git a/misc/tutorial/113_adding_and_removing_columns.ngdoc b/misc/tutorial/113_adding_and_removing_columns.ngdoc index 26d5abdb5b..f9e4dfb42f 100644 --- a/misc/tutorial/113_adding_and_removing_columns.ngdoc +++ b/misc/tutorial/113_adding_and_removing_columns.ngdoc @@ -12,33 +12,40 @@ that default. var app = angular.module('app', ['ngAnimate', 'ui.grid']); - app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) { + app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) { $scope.columns = [{ field: 'name' }, { field: 'gender' }]; $scope.gridOptions = { enableSorting: true, - columnDefs: $scope.columns + columnDefs: $scope.columns, + onRegisterApi: function(gridApi) { + $scope.gridApi = gridApi; + } }; $scope.remove = function() { - $scope.columns.splice($scope.columns.length-1, 1); + $scope.columns.splice($scope.columns.length-1, 1); } $scope.add = function() { - $scope.columns.push({ field: 'company', enableSorting: false }); + $scope.columns.push({ field: 'company', enableSorting: false }); } $scope.splice = function() { - $scope.columns.splice(1, 0, { field: 'company', enableSorting: false }); + $scope.columns.splice(1, 0, { field: 'company', enableSorting: false }); } $scope.unsplice = function() { - $scope.columns.splice(1, 1); + $scope.columns.splice(1, 1); + } + + $scope.toggleVisible = function() { + $scope.columns[0].visible = !($scope.columns[0].visible || $scope.columns[0].visible === undefined); + $scope.gridApi.core.notifyDataChange($scope.gridApi.grid, uiGridConstants.dataChange.COLUMN); } $http.get('/data/100.json') .success(function(data) { $scope.gridOptions.data = data; - console.log(data) }); }]); @@ -53,6 +60,7 @@ that default. +
@@ -89,7 +97,17 @@ that default. element(by.id('button_unsplice')).click(); gridTestUtils.expectHeaderColumnCount( 'grid1', 2 ); gridTestUtils.expectHeaderCellValueMatch( 'grid1', 1, 'Gender' ); - }); + }); + + it('toggle column 0 visible should make column appear and disappear', function () { + element(by.id('button_toggle_visible')).click(); + gridTestUtils.expectHeaderColumnCount( 'grid1', 1 ); + gridTestUtils.expectHeaderCellValueMatch( 'grid1', 0, 'Gender' ); + + element(by.id('button_toggle_visible')).click(); + gridTestUtils.expectHeaderColumnCount( 'grid1', 2 ); + gridTestUtils.expectHeaderCellValueMatch( 'grid1', 0, 'Name' ); + }); }); \ No newline at end of file diff --git a/src/features/importer/test/importer.spec.js b/src/features/importer/test/importer.spec.js index e5464d7964..7f7e9c4160 100644 --- a/src/features/importer/test/importer.spec.js +++ b/src/features/importer/test/importer.spec.js @@ -169,7 +169,7 @@ describe('ui.grid.importer uiGridImporterService', function () { grid.modifyRows($scope.data); angular.forEach( grid.dataChangeCallbacks, function( callback, uid ) { - callback( grid ); + callback.callback( grid ); }); expect( $scope.data.length ).toEqual(4, 'data should now have 4 rows'); @@ -194,7 +194,7 @@ describe('ui.grid.importer uiGridImporterService', function () { grid.modifyRows($scope.data); angular.forEach( grid.dataChangeCallbacks, function( callback, uid ) { - callback( grid ); + callback.callback( grid ); }); expect( $scope.data.length ).toEqual(4, 'data should now have 4 rows'); @@ -263,7 +263,7 @@ describe('ui.grid.importer uiGridImporterService', function () { grid.modifyRows($scope.data); angular.forEach( grid.dataChangeCallbacks, function( callback, uid ) { - callback( grid ); + callback.callback( grid ); }); expect( $scope.data.length ).toEqual(5, 'data should now have 5 rows'); diff --git a/src/js/core/directives/ui-grid.js b/src/js/core/directives/ui-grid.js index ad75e02cd0..27acb1dd6b 100644 --- a/src/js/core/directives/ui-grid.js +++ b/src/js/core/directives/ui-grid.js @@ -56,8 +56,6 @@ self.grid.preCompileCellTemplates(); self.grid.callDataChangeCallbacks(uiGridConstants.dataChange.COLUMN); - - self.grid.refresh(); }); } } diff --git a/src/js/core/factories/Grid.js b/src/js/core/factories/Grid.js index cc99f26c63..dd304c2f2d 100644 --- a/src/js/core/factories/Grid.js +++ b/src/js/core/factories/Grid.js @@ -228,6 +228,8 @@ angular.module('ui.grid') * */ self.api.registerMethod( 'core', 'notifyDataChange', this.notifyDataChange ); + + self.registerDataChangeCallback( self.columnRefreshCallback, [uiGridConstants.dataChange.COLUMN]); }; /** @@ -335,7 +337,7 @@ angular.module('ui.grid') * @param {number} type the type of event that occurred - one of the * uiGridConstants.dataChange values (ALL, ROW, EDIT, COLUMN) */ - Grid.prototype.callDataChangeCallbacks = function callDataChangeCallbacks(type) { + Grid.prototype.callDataChangeCallbacks = function callDataChangeCallbacks(type, options) { angular.forEach( this.dataChangeCallbacks, function( callback, uid ){ if ( callback.types.indexOf( uiGridConstants.dataChange.ALL ) !== -1 || callback.types.indexOf( type ) !== -1 || @@ -367,6 +369,19 @@ angular.module('ui.grid') gridUtil.logError("Notified of a data change, but the type was not recognised, so no action taken, type was: " + type); } }; + + + /** + * @ngdoc function + * @name columnRefreshCallback + * @methodOf ui.grid.class:Grid + * @description refreshes the grid when a column refresh + * is notified, which triggers handling of the visible flag + * @param {string} name column name + */ + Grid.prototype.columnRefreshCallback = function columnRefreshCallback( grid ){ + grid.refresh(); + }; /** diff --git a/src/js/core/services/gridClassFactory.js b/src/js/core/services/gridClassFactory.js index 50e4df115e..92722d9f77 100644 --- a/src/js/core/services/gridClassFactory.js +++ b/src/js/core/services/gridClassFactory.js @@ -110,7 +110,9 @@ * */ if (!colDef.headerCellTemplate) { - colDef.headerCellTemplate = 'ui-grid/uiGridHeaderCell'; + col.headerCellTemplate = 'ui-grid/uiGridHeaderCell'; + } else { + col.headerCellTemplate = colDef.headerCellTemplate; } /** @@ -123,11 +125,12 @@ * */ if (!colDef.cellTemplate) { - colDef.cellTemplate = 'ui-grid/uiGridCell'; - col.cellTemplatePromise = gridUtil.getTemplate(colDef.cellTemplate); + col.cellTemplate = 'ui-grid/uiGridCell'; + } else { + col.cellTemplate = colDef.cellTemplate; } - col.cellTemplatePromise = gridUtil.getTemplate(colDef.cellTemplate); + col.cellTemplatePromise = gridUtil.getTemplate(col.cellTemplate); templateGetPromises.push(col.cellTemplatePromise .then( function (template) { @@ -138,7 +141,7 @@ }) ); - templateGetPromises.push(gridUtil.getTemplate(colDef.headerCellTemplate) + templateGetPromises.push(gridUtil.getTemplate(col.headerCellTemplate) .then( function (template) { col.headerCellTemplate = template.replace(uiGridConstants.CUSTOM_FILTERS, col.headerCellFilter ? "|" + col.headerCellFilter : ""); diff --git a/test/unit/core/factories/Grid.spec.js b/test/unit/core/factories/Grid.spec.js index d26b3fbef1..69f4ebbbb6 100644 --- a/test/unit/core/factories/Grid.spec.js +++ b/test/unit/core/factories/Grid.spec.js @@ -602,7 +602,7 @@ describe('Grid factory', function () { expect( grid.dataChangeCallbacks[uid]).toEqual( { callback: jasmine.any(Function), types: [ uiGridConstants.dataChange.ALL ] } ); grid.deregisterDataChangeCallback( uid ); - expect( grid.dataChangeCallbacks ).toEqual( {} ); + expect( grid.dataChangeCallbacks[uid] ).toEqual( undefined ); }); describe( 'mix of callbacks being called', function() { diff --git a/test/unit/core/services/GridClassFactory.spec.js b/test/unit/core/services/GridClassFactory.spec.js index f712997d54..eca2bd7088 100644 --- a/test/unit/core/services/GridClassFactory.spec.js +++ b/test/unit/core/services/GridClassFactory.spec.js @@ -38,8 +38,8 @@ describe('gridClassFactory', function() { gridClassFactory.defaultColumnBuilder( testSetup.colDef, testSetup.col, testSetup.gridOptions ); - expect(testSetup.colDef.headerCellTemplate).toEqual('ui-grid/uiGridHeaderCell'); - expect(testSetup.colDef.cellTemplate).toEqual('ui-grid/uiGridCell'); + expect(testSetup.col.headerCellTemplate).toEqual('ui-grid/uiGridHeaderCell'); + expect(testSetup.col.cellTemplate).toEqual('ui-grid/uiGridCell'); testSetup.$rootScope.$digest(); @@ -53,8 +53,8 @@ describe('gridClassFactory', function() { gridClassFactory.defaultColumnBuilder( testSetup.colDef, testSetup.col, testSetup.gridOptions ); - expect(testSetup.colDef.headerCellTemplate).toEqual('ui-grid/uiGridHeaderCell'); - expect(testSetup.colDef.cellTemplate).toEqual('ui-grid/uiGridCell'); + expect(testSetup.col.headerCellTemplate).toEqual('ui-grid/uiGridHeaderCell'); + expect(testSetup.col.cellTemplate).toEqual('ui-grid/uiGridCell'); testSetup.$rootScope.$digest(); @@ -71,8 +71,8 @@ describe('gridClassFactory', function() { gridClassFactory.defaultColumnBuilder( testSetup.colDef, testSetup.col, testSetup.gridOptions ); - expect(testSetup.colDef.headerCellTemplate).toEqual('ui-grid/uiGridHeaderCell'); - expect(testSetup.colDef.cellTemplate).toEqual('ui-grid/uiGridCell'); + expect(testSetup.col.headerCellTemplate).toEqual('ui-grid/uiGridHeaderCell'); + expect(testSetup.col.cellTemplate).toEqual('ui-grid/uiGridCell'); testSetup.$rootScope.$digest(); @@ -89,8 +89,8 @@ describe('gridClassFactory', function() { gridClassFactory.defaultColumnBuilder( testSetup.colDef, testSetup.col, testSetup.gridOptions ); - expect(testSetup.colDef.headerCellTemplate).toEqual('ui-grid/uiGridHeaderCell'); - expect(testSetup.colDef.cellTemplate).toEqual('ui-grid/uiGridCell'); + expect(testSetup.col.headerCellTemplate).toEqual('ui-grid/uiGridHeaderCell'); + expect(testSetup.col.cellTemplate).toEqual('ui-grid/uiGridCell'); testSetup.$rootScope.$digest();