Skip to content

Commit d293e64

Browse files
katherinedragievakatherinedragieva
committed
Merge branch 'kdragieva/single-cell-value-master' of https://github.com/IgniteUI/igniteui-angular into kdragieva/single-cell-value-master
2 parents 1e9d31d + 0ffd181 commit d293e64

File tree

16 files changed

+403
-76
lines changed

16 files changed

+403
-76
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,13 @@ All notable changes for each version of this project will be documented in this
4747
- Inputs `showToolbar`, `toolbarTitle`, `columnHiding`, `columnHidingTitle`, `hiddenColumnsText`,
4848
`columnPinning`, `columnPinningTitle`, `pinnedColumnsText`.
4949
Use `IgxGridToolbarComponent`, `IgxGridToolbarHidingComponent`, `IgxGridToolbarPinningComponent` instead.
50+
- `igxGrid`
51+
- Exposed a `groupStrategy` input that functions similarly to `sortStrategy`, allowing customization of the grouping behavior of the grid. Please, refer to the [Group By ](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/groupby) topic for more information.
5052
- `IgxColumnActionsComponent`
5153
- **Breaking Change** - The following input has been removed
52-
- Input `columns`. Use `igxGrid` `columns` input instead.
54+
- Input `columns`. Use `igxGrid` `columns` input instead.
5355
- `IgxCarousel`
54-
- **Breaking Changes** -The carousel animation type `CarouselAnimationType` is renamed to `HorizontalAnimationType`.
56+
- **Breaking Changes** -The carousel animation type `CarouselAnimationType` is renamed to `HorizontalAnimationType`.
5557

5658
## 12.2.3
5759

‎projects/igniteui-angular/migrations/update-13_0_0/index.spec.ts

Lines changed: 123 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,14 @@ describe(`Update to ${version}`, () => {
2222
}
2323
};
2424

25-
const migrationName = 'migration-22';
26-
2725
beforeEach(() => {
2826
appTree = new UnitTestTree(new EmptyTree());
2927
appTree.create('/angular.json', JSON.stringify(configJson));
3028
});
3129

30+
const migrationName = 'migration-22';
31+
const lineBreaksAndSpaceRegex = /\s/g;
32+
3233
it('should rename CarouselAnimationType to HorizontalAnimationType', async () => {
3334
appTree.create(
3435
'/testSrc/appPrefix/component/test.component.ts',
@@ -67,4 +68,124 @@ describe(`Update to ${version}`, () => {
6768
)
6869
).toEqual(expectedContent);
6970
});
71+
72+
/* eslint-disable arrow-parens */
73+
it('Should properly rename columns property to columnsCollection', async () => {
74+
appTree.create('/testSrc/appPrefix/component/test.component.ts',
75+
`
76+
import { IgxGridComponent } from 'igniteui-angular';
77+
export class MyClass {
78+
@ViewChild(IgxGridComponent, { read: IgxGridComponent })
79+
public grid1: IgxGridComponent;
80+
81+
public ngAfterViewInit() {
82+
const columns = grid1.columns;
83+
}
84+
}
85+
`);
86+
87+
const tree = await schematicRunner
88+
.runSchematicAsync(migrationName, {}, appTree)
89+
.toPromise();
90+
91+
expect(
92+
tree.readContent('/testSrc/appPrefix/component/test.component.ts')
93+
).toEqual(
94+
`
95+
import { IgxGridComponent } from 'igniteui-angular';
96+
export class MyClass {
97+
@ViewChild(IgxGridComponent, { read: IgxGridComponent })
98+
public grid1: IgxGridComponent;
99+
100+
public ngAfterViewInit() {
101+
const columns = grid1.columnsCollection;
102+
}
103+
}
104+
`
105+
);
106+
});
107+
108+
it('Should properly rename columns property to columnsCollection - treeGrid', async () => {
109+
appTree.create('/testSrc/appPrefix/component/test.component.ts',
110+
`
111+
import { IgxTreeGridComponent } from 'igniteui-angular';
112+
export class MyClass {
113+
@ViewChild(IgxTreeGridComponent, { read: IgxTreeGridComponent })
114+
public tGrid1: IgxTreeGridComponent;
115+
116+
public ngAfterViewInit() {
117+
const columns = this.tGrid1.columns;
118+
}
119+
120+
public soSth() {
121+
const editableColumns = this.tGrid1.columns.filter(c => e.editable);
122+
}
123+
}
124+
`);
125+
126+
const tree = await schematicRunner
127+
.runSchematicAsync(migrationName, {}, appTree)
128+
.toPromise();
129+
130+
expect(
131+
tree.readContent('/testSrc/appPrefix/component/test.component.ts')
132+
).toEqual(
133+
`
134+
import { IgxTreeGridComponent } from 'igniteui-angular';
135+
export class MyClass {
136+
@ViewChild(IgxTreeGridComponent, { read: IgxTreeGridComponent })
137+
public tGrid1: IgxTreeGridComponent;
138+
139+
public ngAfterViewInit() {
140+
const columns = this.tGrid1.columnsCollection;
141+
}
142+
143+
public soSth() {
144+
const editableColumns = this.tGrid1.columnsCollection.filter(c => e.editable);
145+
}
146+
}
147+
`
148+
);
149+
});
150+
151+
it('should remove paging and paginationTemplate property and define a igx-paginator component with custom content', async () => {
152+
appTree.create(
153+
'/testSrc/appPrefix/component/test.component.html', `
154+
<div class="columnHidingContainer">
155+
<div *ngFor="let col of grid.columns">
156+
{{col.field}}
157+
</div>
158+
</div>
159+
<div class="gridContainer">
160+
<igx-grid igxPreventDocumentScroll #grid [data]="data" [autoGenerate]="false" width="100%" height="560px" columnWidth="200px"
161+
[allowFiltering]="true">
162+
<igx-column [field]="'ID'" dataType="string" [sortable]="true"></igx-column>
163+
<igx-column [field]="'ContactName'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
164+
<igx-column [field]="'ContactTitle'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
165+
<igx-column [field]="'City'" dataType="string" [sortable]="true"></igx-column>
166+
<igx-column [field]="'CompanyName'" dataType="string" [sortable]="true"></igx-column>
167+
</igx-grid>
168+
</div>`);
169+
const tree = await schematicRunner.runSchematicAsync(migrationName, {}, appTree)
170+
.toPromise();
171+
172+
expect(tree.readContent('/testSrc/appPrefix/component/test.component.html').replace(lineBreaksAndSpaceRegex, ''))
173+
.toEqual(`
174+
<div class="columnHidingContainer">
175+
<div *ngFor="let col of grid.columnsCollection">
176+
{{col.field}}
177+
</div>
178+
</div>
179+
<div class="gridContainer">
180+
<igx-grid igxPreventDocumentScroll #grid [data]="data" [autoGenerate]="false" width="100%" height="560px" columnWidth="200px"
181+
[allowFiltering]="true">
182+
<igx-column [field]="'ID'" dataType="string" [sortable]="true"></igx-column>
183+
<igx-column [field]="'ContactName'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
184+
<igx-column [field]="'ContactTitle'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
185+
<igx-column [field]="'City'" dataType="string" [sortable]="true"></igx-column>
186+
<igx-column [field]="'CompanyName'" dataType="string" [sortable]="true"></igx-column>
187+
</igx-grid>
188+
</div>
189+
`.replace(lineBreaksAndSpaceRegex, ''));
190+
});
70191
});

‎projects/igniteui-angular/migrations/update-13_0_0/index.ts

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,65 @@
1-
import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
1+
import {
2+
Rule,
3+
SchematicContext,
4+
Tree
5+
} from '@angular-devkit/schematics';
26
import { UpdateChanges } from '../common/UpdateChanges';
7+
import { Element } from '@angular/compiler';
8+
import { findElementNodes, getSourceOffset, parseFile } from '../common/util';
39

410
const version = '13.0.0';
511

612
export default (): Rule => (host: Tree, context: SchematicContext) => {
713
context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
814

915
const update = new UpdateChanges(__dirname, host, context);
16+
const GRIDS = ['IgxGridComponent', 'IgxTreeGridComponent', 'IgxHierarchicalGridComponent'];
17+
const TAGS = ['igx-grid', 'igx-tree-grid', 'igx-hierarchical-grid'];
18+
const tsFiles = update.tsFiles;
19+
20+
for (const path of update.templateFiles) {
21+
findElementNodes(parseFile(host, path), TAGS)
22+
.map(node => getSourceOffset(node as Element))
23+
.forEach(offset => {
24+
const { file, node } = offset;
25+
if (file.content.includes('columns')) {
26+
const gridRef = node.attrs.find(e => e.name.includes('#')).name.substring(1);
27+
const content = file.content.split(gridRef + '.columns').join(gridRef + '.columnsCollection');
28+
host.overwrite(path, content);
29+
}
30+
});
31+
}
32+
33+
const getIndicesOf = (searchStr, str) => {
34+
if (searchStr.length === 0) {
35+
return [];
36+
}
37+
let startIndex = 0;
38+
let index = 0;
39+
const indexes = [];
40+
while ((index = str.indexOf(searchStr, startIndex)) > -1) {
41+
indexes.push(index);
42+
startIndex = index + searchStr.length;
43+
}
44+
return indexes;
45+
};
46+
47+
for (const path of tsFiles) {
48+
let content = host.read(path)?.toString();
49+
GRIDS.forEach(grid => {
50+
if (content.indexOf(grid) > -1) {
51+
const indexes = getIndicesOf('@ViewChild', content);
52+
indexes.forEach(index => {
53+
const viewChildRef = content.substring(index, content.indexOf(';', index)).replace(/\s\s+/g, ' ');
54+
if (viewChildRef.includes(grid)) {
55+
const gridDeclaration = viewChildRef.substring(viewChildRef.indexOf(')') + 1).replace(/\:/g, '').trim();
56+
const gridName = gridDeclaration.split(' ')[1];
57+
content = content.split(gridName + '.columns').join(gridName + '.columnsCollection');
58+
host.overwrite(path, content);
59+
}
60+
});
61+
}
62+
});
63+
}
1064
update.applyChanges();
1165
};

‎projects/igniteui-angular/src/lib/data-operations/data-util.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -263,7 +263,7 @@ const testGroupBy = () => {
263263
// sort
264264
const res = DataUtil.sort(data, [expr]);
265265
// group by
266-
DataUtil.group(res, state, null, groupRecords);
266+
DataUtil.group(res, state, undefined, null, groupRecords);
267267
expect(groupRecords.length).toEqual(2);
268268
expect(groupRecords[0].records.length).toEqual(3);
269269
expect(groupRecords[1].records.length).toEqual(2);
@@ -279,7 +279,7 @@ const testGroupBy = () => {
279279
// sort
280280
const sorted = DataUtil.sort(data, [expr, expr2]);
281281
// group by
282-
DataUtil.group(sorted, state, null, groupRecords);
282+
DataUtil.group(sorted, state, undefined, null, groupRecords);
283283
expect(groupRecords.length).toEqual(2);
284284
expect(groupRecords[0].records.length).toEqual(3);
285285
expect(groupRecords[1].records.length).toEqual(2);

‎projects/igniteui-angular/src/lib/data-operations/data-util.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { IGroupByRecord } from './groupby-record.interface';
1111
import { IGroupingState } from './groupby-state.interface';
1212
import { ISortingExpression } from './sorting-expression.interface';
1313
import { FilteringStrategy } from './filtering-strategy';
14+
import { IGridGroupingStrategy } from './grouping-strategy';
1415
import { ITreeGridRecord } from '../grids/tree-grid/public_api';
1516
import { cloneValue, mergeObjects, mkenum } from '../core/utils';
1617
import { Transaction, TransactionType, HierarchicalTransaction } from '../services/transaction/transaction';
@@ -73,9 +74,8 @@ export class DataUtil {
7374
return rec;
7475
}
7576

76-
public static group<T>(data: T[], state: IGroupingState, grid: GridType = null,
77+
public static group<T>(data: T[], state: IGroupingState, grouping: IGridGroupingStrategy = new IgxGrouping(), grid: GridType = null,
7778
groupsRecords: any[] = [], fullResult: IGroupByResult = { data: [], metadata: [] }): IGroupByResult {
78-
const grouping = new IgxGrouping();
7979
groupsRecords.splice(0, groupsRecords.length);
8080
return grouping.groupBy(data, state, grid, groupsRecords, fullResult);
8181
}

‎projects/igniteui-angular/src/lib/data-operations/grouping-strategy.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
import { IGroupByRecord } from './groupby-record.interface';
2-
import { IgxSorting } from './sorting-strategy';
2+
import { IgxSorting, IGridSortingStrategy } from './sorting-strategy';
33
import { IGroupingState } from './groupby-state.interface';
44
import { IGroupByResult } from './grouping-result.interface';
55

6-
export class IgxGrouping extends IgxSorting {
6+
7+
export interface IGridGroupingStrategy extends IGridSortingStrategy {
8+
groupBy(data: any[], state: IGroupingState, grid?: any, groupsRecords?: any[], fullResult?: IGroupByResult): IGroupByResult;
9+
}
10+
11+
export class IgxGrouping extends IgxSorting implements IGridGroupingStrategy {
712
public groupBy(data: any[], state: IGroupingState, grid?: any,
813
groupsRecords?: any[], fullResult: IGroupByResult = { data: [], metadata: [] }): IGroupByResult {
914
const metadata: IGroupByRecord[] = [];

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,7 @@ Below is the list of all inputs that the developers may set to configure the gri
185185
|`evenRowCSS`|string|Additional styling classes applied to all even rows in the grid.|
186186
|`oddRowCSS`|string|Additional styling classes applied to all odd rows in the grid.|
187187
|`paginationTemplate`|TemplateRef|You can provide a custom `ng-template` for the pagination part of the grid.|
188+
|`groupStrategy`| IGridGroupingStrategy | Provides custom group strategy to be used when grouping |
188189
|`groupingExpressions`| Array | The group by state of the grid.
189190
|`groupingExpansionState`| Array | The list of expansion states of the group rows. Contains the expansion state(expanded: boolean) and an unique identifier for the group row (Array<IGroupByExpandState>) that contains a list of the group row's parents described via their fieldName and value.
190191
|`groupsExpanded`| boolean | Determines whether created groups are rendered expanded or collapsed. |

‎projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -247,6 +247,11 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
247247
if (this.list && this.esf.listData.length) {
248248
return this.list.element.nativeElement.offsetHeight;
249249
}
250+
251+
// GE Nov 1st, 2021 #10355 Return a numeric value, so the chunk size is calculated properly.
252+
// If we skip this branch, on applying the filter the _calculateChunkSize() method off the ForOfDirective receives
253+
// an igxForContainerSize = undefined, thus assigns the chunkSize to the igxForOf.length which leads to performance issues.
254+
return 0;
250255
}
251256

252257
/**

‎projects/igniteui-angular/src/lib/grids/grid/grid.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171
| visibleColumns:hasVisibleColumns
7272
| gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger
7373
| gridSort:sortingExpressions:sortStrategy:id:pipeTrigger
74-
| gridGroupBy:groupingExpressions:groupingExpansionState:groupsExpanded:id:groupsRecords:pipeTrigger
74+
| gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger
7575
| gridPaging:paginator?.page:paginator?.perPage:id:pipeTrigger
7676
| gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger
7777
| gridDetails:hasDetails:expansionStates:pipeTrigger

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import { IgxGridGroupByAreaComponent } from '../grouping/grid-group-by-area.comp
3333
import { IgxGridCell } from '../grid-public-cell';
3434
import { CellType } from '../common/cell.interface';
3535
import { DeprecateMethod } from '../../core/deprecateDecorators';
36+
import { IGridGroupingStrategy } from '../../data-operations/grouping-strategy';
3637

3738
let NEXT_ID = 0;
3839

@@ -263,6 +264,10 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
263264
* @hidden
264265
*/
265266
protected _groupAreaTemplate: TemplateRef<any>;
267+
/**
268+
* @hidden
269+
*/
270+
protected _groupStrategy: IGridGroupingStrategy;
266271
/**
267272
* @hidden
268273
*/
@@ -455,6 +460,25 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
455460
this._hideGroupedColumns = value;
456461
}
457462

463+
/**
464+
* Gets/Sets the grouping strategy of the grid.
465+
*
466+
* @remarks The default IgxGrouping extends from IgxSorting and a custom one can be used as a `sortStrategy` as well.
467+
*
468+
* @example
469+
* ```html
470+
* <igx-grid #grid [data]="localData" [groupStrategy]="groupStrategy"></igx-grid>
471+
* ```
472+
*/
473+
@Input()
474+
public get groupStrategy(): IGridGroupingStrategy {
475+
return this._groupStrategy;
476+
}
477+
478+
public set groupStrategy(value: IGridGroupingStrategy) {
479+
this._groupStrategy = value;
480+
}
481+
458482
/**
459483
* Gets/Sets the message displayed inside the GroupBy drop area where columns can be dragged on.
460484
*

0 commit comments

Comments
 (0)