From 21819c57474bf4451f3126985cfccf294c4c01e2 Mon Sep 17 00:00:00 2001 From: nbulusanjr Date: Wed, 7 Jun 2017 02:57:52 +0800 Subject: [PATCH] fix(6160): Select childrens of row group (#6167) * Update selection.js Select childrens of row group * format indentation * Change scrolling from scroll to auto. * Update test script --- src/features/selection/js/selection.js | 139 +++++++++--------- src/js/core/factories/GridRenderContainer.js | 4 +- .../factories/GridRenderContainer.spec.js | 10 +- 3 files changed, 79 insertions(+), 74 deletions(-) diff --git a/src/features/selection/js/selection.js b/src/features/selection/js/selection.js index 5733f87742..ba37ddd432 100644 --- a/src/features/selection/js/selection.js +++ b/src/features/selection/js/selection.js @@ -28,8 +28,8 @@ }); //add methods to GridRow - angular.module('ui.grid').config(['$provide', function($provide) { - $provide.decorator('GridRow', ['$delegate', function($delegate) { + angular.module('ui.grid').config(['$provide', function ($provide) { + $provide.decorator('GridRow', ['$delegate', function ($delegate) { /** * @ngdoc object @@ -57,20 +57,20 @@ */ - /** - * @ngdoc function - * @name setSelected - * @methodOf ui.grid.selection.api:GridRow - * @description Sets the isSelected property and updates the selectedCount - * Changes to isSelected state should only be made via this function - * @param {bool} selected value to set - */ - $delegate.prototype.setSelected = function(selected) { - if (selected !== this.isSelected) { - this.isSelected = selected; - this.grid.selection.selectedCount += selected ? 1 : -1; - } - }; + /** + * @ngdoc function + * @name setSelected + * @methodOf ui.grid.selection.api:GridRow + * @description Sets the isSelected property and updates the selectedCount + * Changes to isSelected state should only be made via this function + * @param {bool} selected value to set + */ + $delegate.prototype.setSelected = function (selected) { + if (selected !== this.isSelected) { + this.isSelected = selected; + this.grid.selection.selectedCount += selected ? 1 : -1; + } + }; return $delegate; }]); @@ -188,9 +188,9 @@ * @param {number} index index within the rowsVisible array * @param {Event} event object if raised from an event */ - selectRowByVisibleIndex: function ( rowNum, evt ) { + selectRowByVisibleIndex: function (rowNum, evt) { var row = grid.renderContainers.body.visibleRowCache[rowNum]; - if (row !== null && typeof(row) !== 'undefined' && !row.isSelected) { + if (row !== null && typeof (row) !== 'undefined' && !row.isSelected) { service.toggleRowSelection(grid, row, evt, grid.options.multiSelect, grid.options.noUnselect); } }, @@ -222,12 +222,12 @@ var changedRows = []; grid.rows.forEach(function (row) { - if ( !row.isSelected && row.enableSelection !== false ){ + if (!row.isSelected && row.enableSelection !== false) { row.setSelected(true); - service.decideRaiseSelectionEvent( grid, row, changedRows, evt ); + service.decideRaiseSelectionEvent(grid, row, changedRows, evt); } }); - service.decideRaiseSelectionBatchEvent( grid, changedRows, evt ); + service.decideRaiseSelectionBatchEvent(grid, changedRows, evt); grid.selection.selectAll = true; }, /** @@ -245,18 +245,18 @@ var changedRows = []; grid.rows.forEach(function (row) { if (row.visible) { - if (!row.isSelected && row.enableSelection !== false){ + if (!row.isSelected && row.enableSelection !== false) { row.setSelected(true); - service.decideRaiseSelectionEvent( grid, row, changedRows, evt ); + service.decideRaiseSelectionEvent(grid, row, changedRows, evt); } } else { - if (row.isSelected){ + if (row.isSelected) { row.setSelected(false); - service.decideRaiseSelectionEvent( grid, row, changedRows, evt ); + service.decideRaiseSelectionEvent(grid, row, changedRows, evt); } } }); - service.decideRaiseSelectionBatchEvent( grid, changedRows, evt ); + service.decideRaiseSelectionBatchEvent(grid, changedRows, evt); grid.selection.selectAll = true; }, /** @@ -401,7 +401,7 @@ * @description Enable selection by clicking anywhere on the row. Defaults to * false if `enableRowHeaderSelection` is true, otherwise defaults to false. */ - if ( typeof(gridOptions.enableFullRowSelection) === 'undefined' ){ + if (typeof (gridOptions.enableFullRowSelection) === 'undefined') { gridOptions.enableFullRowSelection = !gridOptions.enableRowHeaderSelection; } /** @@ -466,7 +466,7 @@ toggleRowSelection: function (grid, row, evt, multiSelect, noUnselect) { var selected = row.isSelected; - if ( row.enableSelection === false && !selected ){ + if (row.enableSelection === false && !selected) { return; } @@ -481,7 +481,7 @@ } } - if (selected && noUnselect){ + if (selected && noUnselect) { // don't deselect the row } else { row.setSelected(!selected); @@ -523,14 +523,14 @@ for (var i = fromRow; i <= toRow; i++) { var rowToSelect = grid.renderContainers.body.visibleRowCache[i]; if (rowToSelect) { - if ( !rowToSelect.isSelected && rowToSelect.enableSelection !== false ){ + if (!rowToSelect.isSelected && rowToSelect.enableSelection !== false) { rowToSelect.setSelected(true); grid.selection.lastSelectedRow = rowToSelect; - service.decideRaiseSelectionEvent( grid, rowToSelect, changedRows, evt ); + service.decideRaiseSelectionEvent(grid, rowToSelect, changedRows, evt); } } } - service.decideRaiseSelectionBatchEvent( grid, changedRows, evt ); + service.decideRaiseSelectionBatchEvent(grid, changedRows, evt); }, /** * @ngdoc function @@ -556,12 +556,12 @@ clearSelectedRows: function (grid, evt) { var changedRows = []; service.getSelectedRows(grid).forEach(function (row) { - if ( row.isSelected ){ + if (row.isSelected) { row.setSelected(false); - service.decideRaiseSelectionEvent( grid, row, changedRows, evt ); + service.decideRaiseSelectionEvent(grid, row, changedRows, evt); } }); - service.decideRaiseSelectionBatchEvent( grid, changedRows, evt ); + service.decideRaiseSelectionBatchEvent(grid, changedRows, evt); grid.selection.selectAll = false; grid.selection.selectedCount = 0; }, @@ -577,8 +577,8 @@ * @param {Event} event object if raised from an event * row if we're doing batch events */ - decideRaiseSelectionEvent: function( grid, row, changedRows, evt ){ - if ( !grid.options.enableSelectionBatchEvent ){ + decideRaiseSelectionEvent: function (grid, row, changedRows, evt) { + if (!grid.options.enableSelectionBatchEvent) { grid.api.selection.raise.rowSelectionChanged(row, evt); } else { changedRows.push(row); @@ -596,8 +596,8 @@ * @param {Event} event object if raised from an event * if we're doing batch events */ - decideRaiseSelectionBatchEvent: function( grid, changedRows, evt ){ - if ( changedRows.length > 0 ){ + decideRaiseSelectionBatchEvent: function (grid, changedRows, evt) { + if (changedRows.length > 0) { grid.api.selection.raise.rowSelectionChangedBatch(changedRows, evt); } } @@ -654,7 +654,7 @@ var selectionRowHeaderDef = { name: uiGridSelectionConstants.selectionRowHeaderColName, displayName: '', - width: uiGridCtrl.grid.options.selectionRowHeaderWidth, + width: uiGridCtrl.grid.options.selectionRowHeaderWidth, minWidth: 10, cellTemplate: 'ui-grid/selectionRowHeader', headerCellTemplate: 'ui-grid/selectionHeaderCell', @@ -669,14 +669,14 @@ var processorSet = false; - var processSelectableRows = function( rows ){ - rows.forEach(function(row){ + var processSelectableRows = function (rows) { + rows.forEach(function (row) { row.enableSelection = uiGridCtrl.grid.options.isRowSelectable(row); }); return rows; }; - var updateOptions = function(){ + var updateOptions = function () { if (uiGridCtrl.grid.options.isRowSelectable !== angular.noop && processorSet !== true) { uiGridCtrl.grid.registerRowsProcessor(processSelectableRows, 500); processorSet = true; @@ -685,9 +685,9 @@ updateOptions(); - var dataChangeDereg = uiGridCtrl.grid.registerDataChangeCallback( updateOptions, [uiGridConstants.dataChange.OPTIONS] ); + var dataChangeDereg = uiGridCtrl.grid.registerDataChangeCallback(updateOptions, [uiGridConstants.dataChange.OPTIONS]); - $scope.$on( '$destroy', dataChangeDereg); + $scope.$on('$destroy', dataChangeDereg); }, post: function ($scope, $elm, $attrs, uiGridCtrl) { @@ -705,7 +705,7 @@ template: $templateCache.get('ui-grid/selectionRowHeaderButtons'), scope: true, require: '^uiGrid', - link: function($scope, $elm, $attrs, uiGridCtrl) { + link: function ($scope, $elm, $attrs, uiGridCtrl) { var self = uiGridCtrl.grid; $scope.selectButtonClick = selectButtonClick; @@ -725,6 +725,11 @@ else if (evt.ctrlKey || evt.metaKey) { uiGridSelectionService.toggleRowSelection(self, row, evt, self.options.multiSelect, self.options.noUnselect); } + else if (row.groupHeader) { + for (var i = 0; i < row.treeNode.children.length; i++) { + uiGridSelectionService.toggleRowSelection(self, row.treeNode.children[i].row, evt, self.options.multiSelect, self.options.noUnselect); + } + } else { uiGridSelectionService.toggleRowSelection(self, row, evt, (self.options.multiSelect && !self.options.modifierKeysToMultiSelect), self.options.noUnselect); } @@ -751,18 +756,18 @@ restrict: 'E', template: $templateCache.get('ui-grid/selectionSelectAllButtons'), scope: false, - link: function($scope, $elm, $attrs, uiGridCtrl) { + link: function ($scope, $elm, $attrs, uiGridCtrl) { var self = $scope.col.grid; - $scope.headerButtonClick = function(row, evt) { - if ( self.selection.selectAll ){ + $scope.headerButtonClick = function (row, evt) { + if (self.selection.selectAll) { uiGridSelectionService.clearSelectedRows(self, evt); - if ( self.options.noUnselect ){ + if (self.options.noUnselect) { self.api.selection.selectRowByVisibleIndex(0, evt); } self.selection.selectAll = false; } else { - if ( self.options.multiSelect ){ + if (self.options.multiSelect) { self.api.selection.selectAllVisibleRows(evt); self.selection.selectAll = true; } @@ -791,7 +796,7 @@ var existingNgClass = rowRepeatDiv.attr("ng-class"); var newNgClass = ''; - if ( existingNgClass ) { + if (existingNgClass) { newNgClass = existingNgClass.slice(0, -1) + ",'ui-grid-row-selected': row.isSelected}"; } else { newNgClass = "{'ui-grid-row-selected': row.isSelected}"; @@ -845,7 +850,7 @@ $scope.$apply(); } - // uiGridCellNavService.scrollToIfNecessary(uiGridCtrl.grid, rowCol.row, rowCol.col); + // uiGridCellNavService.scrollToIfNecessary(uiGridCtrl.grid, rowCol.row, rowCol.col); }); } @@ -856,7 +861,7 @@ // } //}); - var selectCells = function(evt){ + var selectCells = function (evt) { // if you click on expandable icon doesn't trigger selection if (evt.target.className === "ui-grid-icon-minus-squared" || evt.target.className === "ui-grid-icon-plus-squared") { return; @@ -878,30 +883,30 @@ // don't re-enable the touchend handler for a little while - some devices generate both, and it will // take a little while to move your hand from the mouse to the screen if you have both modes of input - $timeout(function() { + $timeout(function () { $elm.on('touchend', touchEnd); }, touchTimeout); }; - var touchStart = function(evt){ + var touchStart = function (evt) { touchStartTime = (new Date()).getTime(); // if we get a touch event, then stop listening for click $elm.off('click', selectCells); }; - var touchEnd = function(evt) { + var touchEnd = function (evt) { var touchEndTime = (new Date()).getTime(); var touchTime = touchEndTime - touchStartTime; - if (touchTime < touchTimeout ) { + if (touchTime < touchTimeout) { // short touch selectCells(evt); } // don't re-enable the click handler for a little while - some devices generate both, and it will // take a little while to move your hand from the screen to the mouse if you have both modes of input - $timeout(function() { + $timeout(function () { $elm.on('click', selectCells); }, touchTimeout); }; @@ -918,7 +923,7 @@ } function deregisterRowSelectionEvents() { - if ($scope.registered){ + if ($scope.registered) { $elm.removeClass('ui-grid-disable-selection'); $elm.off('touchstart', touchStart); @@ -932,17 +937,17 @@ registerRowSelectionEvents(); // register a dataChange callback so that we can change the selection configuration dynamically // if the user changes the options - var dataChangeDereg = $scope.grid.registerDataChangeCallback( function() { - if ( $scope.grid.options.enableRowSelection && $scope.grid.options.enableFullRowSelection && - !$scope.registered ){ + var dataChangeDereg = $scope.grid.registerDataChangeCallback(function () { + if ($scope.grid.options.enableRowSelection && $scope.grid.options.enableFullRowSelection && + !$scope.registered) { registerRowSelectionEvents(); - } else if ( ( !$scope.grid.options.enableRowSelection || !$scope.grid.options.enableFullRowSelection ) && - $scope.registered ){ + } else if ((!$scope.grid.options.enableRowSelection || !$scope.grid.options.enableFullRowSelection) && + $scope.registered) { deregisterRowSelectionEvents(); } - }, [uiGridConstants.dataChange.OPTIONS] ); + }, [uiGridConstants.dataChange.OPTIONS]); - $elm.on( '$destroy', dataChangeDereg); + $elm.on('$destroy', dataChangeDereg); } }; }]); diff --git a/src/js/core/factories/GridRenderContainer.js b/src/js/core/factories/GridRenderContainer.js index 8151516bec..5652468372 100644 --- a/src/js/core/factories/GridRenderContainer.js +++ b/src/js/core/factories/GridRenderContainer.js @@ -779,8 +779,8 @@ angular.module('ui.grid') self.hasVScrollbar = !self.grid.isRTL() ? self.grid.options.enableVerticalScrollbar !== uiGridConstants.scrollbars.NEVER : false; } - styles['overflow-x'] = self.hasHScrollbar ? 'scroll' : 'hidden'; - styles['overflow-y'] = self.hasVScrollbar ? 'scroll' : 'hidden'; + styles['overflow-x'] = self.hasHScrollbar ? 'auto' : 'hidden'; + styles['overflow-y'] = self.hasVScrollbar ? 'auto' : 'hidden'; return styles; diff --git a/test/unit/core/factories/GridRenderContainer.spec.js b/test/unit/core/factories/GridRenderContainer.spec.js index 97cdaae943..8e8e7759ee 100644 --- a/test/unit/core/factories/GridRenderContainer.spec.js +++ b/test/unit/core/factories/GridRenderContainer.spec.js @@ -45,19 +45,19 @@ describe('GridRenderContainer factory', function () { it('should have a vert and horiz scrollbar on body', function () { r.name = 'body'; - expect(r.getViewportStyle()).toEqual({'overflow-x':'scroll', 'overflow-y':'scroll'}); + expect(r.getViewportStyle()).toEqual({'overflow-x':'auto', 'overflow-y':'auto'}); }); it('should have a vert only', function () { r.name = 'body'; grid.options.enableVerticalScrollbar = uiGridConstants.scrollbars.NEVER; - expect(r.getViewportStyle()).toEqual({'overflow-x':'scroll', 'overflow-y':'hidden'}); + expect(r.getViewportStyle()).toEqual({'overflow-x':'auto', 'overflow-y':'hidden'}); }); it('should have a horiz only', function () { r.name = 'body'; grid.options.enableHorizontalScrollbar = uiGridConstants.scrollbars.NEVER; - expect(r.getViewportStyle()).toEqual({'overflow-x':'hidden', 'overflow-y':'scroll'}); + expect(r.getViewportStyle()).toEqual({'overflow-x':'hidden', 'overflow-y':'auto'}); }); it('left should have a no scrollbar when not rtl', function () { @@ -67,7 +67,7 @@ describe('GridRenderContainer factory', function () { it('right should have a vert scrollbar when not rtl', function () { r.name = 'right'; - expect(r.getViewportStyle()).toEqual({'overflow-x':'hidden', 'overflow-y':'scroll'}); + expect(r.getViewportStyle()).toEqual({'overflow-x':'hidden', 'overflow-y':'auto'}); }); it('right should have no scrollbar when configured', function () { @@ -79,7 +79,7 @@ describe('GridRenderContainer factory', function () { it('left should have a vert scrollbar when rtl', function () { r.name = 'left'; grid.rtl = true; - expect(r.getViewportStyle()).toEqual({'overflow-x':'hidden', 'overflow-y':'scroll'}); + expect(r.getViewportStyle()).toEqual({'overflow-x':'hidden', 'overflow-y':'auto'}); }); it('left should have no vert scrollbar when rtl and configured Never', function () {