Skip to content

Commit 074d9ea

Browse files
ChronosSFChronosSF
authored
Merge pull request #8147 from IgniteUI/mevtimov/feat-7344-master
feat(grid): Select All Rows In A Group #7344
2 parents 966abea + 7b91087 commit 074d9ea

22 files changed

+1285
-199
lines changed

‎projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
export interface IGridResourceStrings {
22
igx_grid_groupByArea_message?: string;
3+
igx_grid_groupByArea_select_message?: string;
4+
igx_grid_groupByArea_deselect_message?: string;
35
igx_grid_emptyFilteredGrid_message?: string;
46
igx_grid_emptyGrid_message?: string;
57
igx_grid_filter?: string;
@@ -113,6 +115,8 @@ export interface IGridResourceStrings {
113115

114116
export const GridResourceStringsEN: IGridResourceStrings = {
115117
igx_grid_groupByArea_message: 'Drag a column header and drop it here to group by that column.',
118+
igx_grid_groupByArea_select_message: 'Select all rows in the group with field name {0} and value {1}.',
119+
igx_grid_groupByArea_deselect_message: 'Deselect all rows in the group with field name {0} and value {1}.',
116120
igx_grid_emptyFilteredGrid_message: 'No records found.',
117121
igx_grid_emptyGrid_message: 'Grid has no data.',
118122
igx_grid_filter: 'Filter',

‎projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-display-container.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
width: 100%;
55
overflow: hidden;
66
flex-shrink: 0;
7+
order: 3;
78
}
89

910
%display-container--inactive {

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -647,10 +647,6 @@
647647
@extend %igx-grid__hierarchical-expander--push !optional;
648648
}
649649

650-
@include e(hierarchical-expander, $m: no-border) {
651-
@extend %igx-grid__hierarchical-expander--no-border !optional;
652-
}
653-
654650
@include e(hierarchical-indent, $m: scroll) {
655651
@extend %igx-grid__hierarchical-indent--scroll !optional;
656652
}
@@ -663,6 +659,7 @@
663659
@include e(row-indentation, $m: level-#{$i}) {
664660
@extend %igx-grid__row-indentation--level-#{$i} !optional;
665661
}
662+
666663
@include e(group-row, $m: padding-level-#{$i}) {
667664
@extend %igx-grid__group-row--padding-level-#{$i} !optional;
668665
}
@@ -771,8 +768,9 @@
771768
@include e(row-indentation, $m: level-#{$i}) {
772769
@extend %igx-grid__row-indentation-cosy--level-#{$i} !optional;
773770
}
771+
774772
@include e(group-row, $m: padding-level-#{$i}) {
775-
@extend %igx-grid__group-row--padding-cosy-level-#{$i} !optional;
773+
@extend %igx-grid__group-row-cosy--padding-level-#{$i} !optional;
776774
}
777775
}
778776

@@ -883,6 +881,7 @@
883881
@include e(row-indentation, $m: level-#{$i}) {
884882
@extend %igx-grid__row-indentation-compact--level-#{$i} !optional;
885883
}
884+
886885
@include e(group-row, $m: padding-level-#{$i}) {
887886
@extend %igx-grid__group-row-compact--padding-level-#{$i} !optional;
888887
}

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss‎

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1043,12 +1043,13 @@
10431043
align-items: center;
10441044
justify-content: center;
10451045
padding: map-get($grid-cell-padding, 'comfortable');
1046-
padding-#{$right}: 0;
1046+
flex: 1 0 auto;
10471047
// Fix for IE 11
10481048
min-width: calc(#{$drag-icon-size} + #{$cell-padding-comfortable});
10491049
background: inherit;
10501050
z-index: 4;
10511051
cursor: move;
1052+
order: -1;
10521053

10531054
%igx-icon-display {
10541055
width: $drag-icon-size;
@@ -1057,29 +1058,22 @@
10571058
}
10581059
}
10591060

1060-
%igx-grid__drag-indicator--cosy{
1061+
%igx-grid__drag-indicator--cosy {
10611062
padding: map-get($grid-cell-padding, 'cosy');
10621063
// Fix for IE 11
10631064
min-width: calc(#{$drag-icon-size} + #{$cell-padding-cosy});
1064-
padding-#{$right}: 0;
10651065
}
10661066

10671067
%igx-grid__drag-indicator--compact {
10681068
padding: map-get($grid-cell-padding, 'compact');
10691069
// Fix for IE 11
10701070
min-width: calc(#{$drag-icon-size} + #{$cell-padding-compact});
1071-
padding-#{$right}: 0;
10721071
}
10731072

10741073
%igx-grid__drag-indicator--header {
10751074
border-#{$right}: $grid-header-border;
10761075
}
10771076

1078-
%igx-grid__hierarchical-expander + %igx-grid__drag-indicator {
1079-
padding-#{$left}: 0;
1080-
min-width: $drag-icon-size;
1081-
}
1082-
10831077
%igx-grid__drag-indicator--off {
10841078
color: --var($theme, 'row-drag-color');
10851079
}
@@ -1945,6 +1939,11 @@
19451939
outline-style: none;
19461940
border-bottom: 1px solid --var($theme, 'row-border-color');
19471941
min-height: map-get($grid-header-height, 'comfortable');
1942+
1943+
%igx-grid__drag-indicator {
1944+
cursor: default;
1945+
flex-grow: 0;
1946+
}
19481947
}
19491948

19501949
%igx-grid__group-row--active {
@@ -1955,6 +1954,13 @@
19551954
color: --var($theme, 'expand-icon-color');
19561955
}
19571956

1957+
%igx-grid__drag-indicator {
1958+
border: 1px solid --var($theme, 'cell-active-border-color');
1959+
border-left-width: 0;
1960+
border-right-width: 0;
1961+
box-shadow: inset 1px 0 0 0 --var($theme, 'cell-active-border-color');
1962+
}
1963+
19581964
&:hover {
19591965
background: --var($theme, 'group-row-selected-background');
19601966
}
@@ -2061,15 +2067,15 @@
20612067
}
20622068

20632069
%igx-grid__row-indentation {
2064-
background: transparent;
2065-
z-index: 1;
2070+
position: relative;
20662071
display: flex;
20672072
justify-content: center;
20682073
align-items: center;
2069-
position: relative;
20702074
padding-#{$left}: map-get($grid-grouping-indicator-padding, 'comfortable');
20712075
padding-#{$right}: map-get($grid-grouping-indicator-padding, 'comfortable');
2072-
border-#{$right}: 1px solid transparent;
2076+
border-#{$right}: 1px solid --var($theme, 'header-border-color');
2077+
background: inherit;
2078+
z-index: 1;
20732079

20742080
&::after {
20752081
content: '';
@@ -2202,8 +2208,8 @@
22022208
align-items: center;
22032209
z-index: 1;
22042210
cursor: pointer;
2205-
padding-#{$left}: map-get($grid-grouping-indicator-padding, 'comfortable');
22062211
padding-#{$right}: $grouping-padding-right;
2212+
margin-#{$left}: #{map-get($grid-grouping-indicator-padding, 'comfortable')};
22072213
min-height: map-get($grid-header-height, 'comfortable');
22082214

22092215
igx-icon {
@@ -2226,13 +2232,13 @@
22262232
}
22272233

22282234
%igx-grid__grouping-indicator--cosy {
2229-
padding-#{$left}: map-get($grid-grouping-indicator-padding, 'cosy');
22302235
min-height: map-get($grid-header-height, 'cosy');
2236+
margin-#{$left}: #{map-get($grid-grouping-indicator-padding, 'cosy')};
22312237
}
22322238

22332239
%igx-grid__grouping-indicator--compact {
2234-
padding-#{$left}: map-get($grid-grouping-indicator-padding, 'compact');
22352240
min-height: map-get($grid-header-height, 'compact');
2241+
margin-#{$left}: #{map-get($grid-grouping-indicator-padding, 'compact')};
22362242
}
22372243

22382244
%igx-grid__header-indentation {
@@ -2284,32 +2290,34 @@
22842290
}
22852291

22862292
@for $i from 1 through 10 {
2287-
// COMFORTABLE
22882293
%igx-grid__row-indentation--level-#{$i} {
2289-
background: inherit;
22902294
padding-#{$left}: calc(#{$i*map-get($grid-grouping-indicator-padding, 'comfortable')} + #{$indicator-icon-width});
22912295
}
22922296

22932297
%igx-grid__group-row--padding-level-#{$i} {
2294-
padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'comfortable')};
2298+
%igx-grid__grouping-indicator {
2299+
padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'comfortable')};
2300+
}
22952301
}
22962302

2297-
// COSY
22982303
%igx-grid__row-indentation-cosy--level-#{$i} {
22992304
padding-#{$left}: calc(#{$i*map-get($grid-grouping-indicator-padding, 'cosy')} + #{$indicator-icon-width});
23002305
}
23012306

23022307
%igx-grid__group-row-cosy--padding-level-#{$i} {
2303-
padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'cosy')};
2308+
%igx-grid__grouping-indicator {
2309+
padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'cosy')};
2310+
}
23042311
}
23052312

2306-
// COMPACT
23072313
%igx-grid__row-indentation-compact--level-#{$i} {
23082314
padding-#{$left}: calc(#{$i*map-get($grid-grouping-indicator-padding, 'compact')} + #{$indicator-icon-width});
23092315
}
23102316

23112317
%igx-grid__group-row-compact--padding-level-#{$i} {
2312-
padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'compact')};
2318+
%igx-grid__grouping-indicator {
2319+
padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'compact')};
2320+
}
23132321
}
23142322
}
23152323

@@ -2629,7 +2637,8 @@
26292637
cursor: pointer;
26302638
z-index: 3;
26312639
color: --var($theme, 'expand-icon-color');
2632-
border-#{$right}: 1px solid transparent;
2640+
border-#{$right}: 1px solid --var($theme, 'header-border-color');
2641+
order: 2;
26332642

26342643
&:focus {
26352644
outline: none;
@@ -2703,7 +2712,6 @@
27032712
}
27042713
}
27052714

2706-
%igx-grid__hierarchical-expander--no-border,
27072715
%igx-grid__header-indentation--no-border {
27082716
border-#{$right}: 1px solid transparent;
27092717
}

‎projects/igniteui-angular/src/lib/grids/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -311,6 +311,8 @@ Here is a list of all public methods exposed by **igx-grid**:
311311
|`isExpandedGroup(group: IGroupByRecord )`| Returns if a group is expanded or not.
312312
|`toggleGroup(group: IGroupByRecord)`| Toggles the expansion state of a group.
313313
|`toggleAllGroupRows()`| Toggles the expansion state of all group rows recursively.
314+
|`selectAllRowsInGroup(group: IGroupByRecord, clearPrevSelection?: boolean)`| Select all rows within a group.
315+
|`deselectAllRowsInGroup(group: IGroupByRecord)`| Deselect all rows within a group.
314316
|`openAdvancedFilteringDialog()`| Opens the advanced filtering dialog.
315317
|`closeAdvancedFilteringDialog(applyChanges: boolean)`| Closes the advanced filtering dialog.
316318

‎projects/igniteui-angular/src/lib/grids/grid-base.directive.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3003,9 +3003,9 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
30033003
if (!this.crudService.cell &&
30043004
!!this.navigation.activeNode &&
30053005
((event.target === this.tbody.nativeElement && this.navigation.activeNode.row >= 0 &&
3006-
this.navigation.activeNode.row < this.dataView.length)
3007-
|| (event.target === this.theadRow.nativeElement && this.navigation.activeNode.row === -1)
3008-
|| (event.target === this.tfoot.nativeElement && this.navigation.activeNode.row === this.dataView.length)) &&
3006+
this.navigation.activeNode.row < this.dataView.length)
3007+
|| (event.target === this.theadRow.nativeElement && this.navigation.activeNode.row === -1)
3008+
|| (event.target === this.tfoot.nativeElement && this.navigation.activeNode.row === this.dataView.length)) &&
30093009
!(this.rowEditable && this.crudService.rowEditingBlocked && this.rowInEditMode)) {
30103010
this.navigation.activeNode = {} as IActiveNode;
30113011
this.notifyChanges();
@@ -3967,7 +3967,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
39673967
*/
39683968
get showAddButton() {
39693969
return this.rowEditable && this.dataView.length === 0 && this.columns.length > 0;
3970-
}
3970+
}
39713971

39723972
/**
39733973
* @hidden
@@ -6646,7 +6646,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
66466646
public endAdd(commit = true, event?: Event) {
66476647
const row = this.crudService.row;
66486648
const cell = this.crudService.cell;
6649-
const cachedRowData = {...row.data};
6649+
const cachedRowData = { ...row.data };
66506650
let cancelable = false;
66516651
if (!row && !cell) {
66526652
return;
@@ -6675,7 +6675,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
66756675
this.rowEditDone.emit(doneArgs);
66766676
this.crudService.endRowEdit();
66776677
if (this.addRowParent.isPinned) {
6678-
this.pinRow(row.id);
6678+
this.pinRow(row.id);
66796679
}
66806680
}
66816681
this.addRowParent = null;
@@ -6689,7 +6689,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
66896689
this._pipeTrigger++;
66906690
if (!this.cancelAddMode) {
66916691
this.cdr.detectChanges();
6692-
this.onRowAdded.emit({ data: row.data});
6692+
this.onRowAdded.emit({ data: row.data });
66936693
}
66946694
const nonCancelableArgs = row.createDoneEditEventArgs(cachedRowData);
66956695
this.rowEditExit.emit(nonCancelableArgs);

‎projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { GridKeydownTargetType, GridSelectionMode, FilterMode } from './common/e
99
import { SortingDirection } from '../data-operations/sorting-expression.interface';
1010
import { IgxGridExcelStyleFilteringComponent } from './filtering/excel-style/grid.excel-style-filtering.component';
1111
import { IActiveNodeChangeEventArgs } from './common/events';
12+
import { IgxGridGroupByRowComponent } from './grid/groupby-row.component';
1213
export interface ColumnGroupsCache {
1314
level: number;
1415
visibleIndex: number;
@@ -151,9 +152,17 @@ export class IgxGridNavigationService {
151152
case 'spacebar':
152153
case 'space':
153154
const rowObj = this.grid.getRowByIndex(this.activeNode.row);
154-
if (this.grid.isRowSelectable && this.isDataRow(rowIndex)) {
155-
rowObj && rowObj.selected ? this.grid.selectionService.deselectRow(rowObj.rowID, event) :
156-
this.grid.selectionService.selectRowById(rowObj.rowID, false, event);
155+
if (this.grid.isRowSelectable && rowObj) {
156+
if (this.isDataRow(rowIndex)) {
157+
if (rowObj.selected) {
158+
this.grid.selectionService.deselectRow(rowObj.rowID, event);
159+
} else {
160+
this.grid.selectionService.selectRowById(rowObj.rowID, false, event);
161+
}
162+
}
163+
if (this.isGroupRow(rowIndex)) {
164+
(<any>rowObj as IgxGridGroupByRowComponent).onGroupSelectorClick(event);
165+
}
157166
}
158167
break;
159168
default:
@@ -403,6 +412,12 @@ export class IgxGridNavigationService {
403412
&& !curRow.childGridsData && (includeSummary || !curRow.summaries);
404413
}
405414

415+
public isGroupRow(rowIndex: number): boolean {
416+
if (rowIndex < 0 || rowIndex > this.grid.dataView.length - 1) { return false; }
417+
const curRow = this.grid.dataView[rowIndex];
418+
return curRow && this.grid.isGroupByRecord(curRow);
419+
}
420+
406421
public setActiveNode(activeNode: IActiveNode) {
407422
if (!this.isActiveNodeChanged(activeNode)) {
408423
return;

‎projects/igniteui-angular/src/lib/grids/grid/grid-api.service.ts‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,23 +35,23 @@ export class IgxGridAPIService extends GridBaseAPIService<IgxGridComponent> {
3535
const sortingState = cloneArray(this.grid.sortingExpressions);
3636

3737
if (name) {
38-
const names = typeof name === 'string' ? [ name ] : name;
38+
const names = typeof name === 'string' ? [name] : name;
3939
const groupedCols = groupingState.filter((state) => names.indexOf(state.fieldName) < 0);
4040
const newSortingExpr = sortingState.filter((state) => names.indexOf(state.fieldName) < 0);
4141
this.grid.groupingExpressions = groupedCols;
4242
this.grid.sortingExpressions = newSortingExpr;
4343
names.forEach((colName) => {
4444
const grExprIndex = groupingState.findIndex((exp) => exp.fieldName === colName);
4545
const grpExpandState = this.grid.groupingExpansionState;
46-
/* remove expansion states related to the cleared group
47-
and all with deeper hierarchy than the cleared group */
46+
/* remove expansion states related to the cleared group
47+
and all with deeper hierarchy than the cleared group */
4848
const newExpandState = grpExpandState.filter((val) => {
4949
return val.hierarchy && val.hierarchy.length <= grExprIndex;
5050
});
5151
/* Do not set the new instance produced by filter
5252
when there are no differences between expansion states */
5353
if (newExpandState.length !== grpExpandState.length) {
54-
this.grid.groupingExpansionState = newExpandState;
54+
this.grid.groupingExpansionState = newExpandState;
5555
}
5656
});
5757
} else {
@@ -119,6 +119,16 @@ export class IgxGridAPIService extends GridBaseAPIService<IgxGridComponent> {
119119
}
120120
}
121121

122+
public groupBy_select_all_rows_in_group(groupRow: IGroupByRecord, clearPrevSelection: boolean) {
123+
this.grid.selectionService.selectRowsWithNoEvent(this.grid.primaryKey ?
124+
groupRow.records.map(x => x[this.grid.primaryKey]) : groupRow.records, clearPrevSelection);
125+
}
126+
127+
public groupBy_deselect_all_rows_in_group(groupRow: IGroupByRecord) {
128+
this.grid.selectionService.deselectRowsWithNoEvent(this.grid.primaryKey ?
129+
groupRow.records.map(x => x[this.grid.primaryKey]) : groupRow.records);
130+
}
131+
122132
protected remove_grouping_expression(fieldName) {
123133
const groupingExpressions = this.grid.groupingExpressions;
124134
const index = groupingExpressions.findIndex((expr) => expr.fieldName === fieldName);

0 commit comments

Comments
 (0)