Skip to content

Commit 5c4d030

Browse files
MonikaKirkovaMonikaKirkova
authored
Merge branch '13.0.x' into mkirkova/fix-10520-13.0.x
2 parents f033c6f + 0aae1a5 commit 5c4d030

File tree

10 files changed

+143
-54
lines changed

10 files changed

+143
-54
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -982,7 +982,7 @@
982982
top: 0;
983983
#{$right}: 0;
984984
background: var-get($theme, 'header-background');
985-
border-#{$left}: 1px solid var-get($theme, 'header-border-color');
985+
border-#{$left}: 1px solid igx-color($palette, 'grays', 300);
986986
}
987987

988988
%grid-tbody-scrollbar {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -826,7 +826,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
826826
*/
827827
public pointerenter = (event: PointerEvent) => {
828828
const isHierarchicalGrid = this.grid.nativeElement.tagName.toLowerCase() === 'igx-hierarchical-grid';
829-
if (isHierarchicalGrid && (!this.grid.navigation.activeNode.gridID || this.grid.navigation.activeNode.gridID !== this.gridID)) {
829+
if (isHierarchicalGrid && (!this.grid.navigation?.activeNode?.gridID || this.grid.navigation.activeNode.gridID !== this.gridID)) {
830830
return;
831831
}
832832
const dragMode = this.selectionService.pointerEnter(this.selectionNode, event);
@@ -841,7 +841,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
841841
*/
842842
public pointerup = (event: PointerEvent) => {
843843
const isHierarchicalGrid = this.grid.nativeElement.tagName.toLowerCase() === 'igx-hierarchical-grid';
844-
if (!this.platformUtil.isLeftClick(event) || (isHierarchicalGrid && (!this.grid.navigation.activeNode.gridID ||
844+
if (!this.platformUtil.isLeftClick(event) || (isHierarchicalGrid && (!this.grid.navigation?.activeNode?.gridID ||
845845
this.grid.navigation.activeNode.gridID !== this.gridID))) {
846846
return;
847847
}

‎projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -371,10 +371,6 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
371371
});
372372
}
373373
}
374-
// constructor(public gridAPI: GridBaseAPIService<IgxGridBaseDirective & IGridDataBindable>, public cdr: ChangeDetectorRef) {
375-
// // D.P. constructor duplication due to es6 compilation, might be obsolete in the future
376-
// super(gridAPI, cdr);
377-
// }
378374

379375
/**
380376
* @hidden

‎projects/igniteui-angular/src/lib/grids/common/pipes.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -233,6 +233,19 @@ export class IgxHasVisibleColumnsPipe implements PipeTransform {
233233

234234
}
235235

236+
/** @hidden @internal */
237+
function buildDataView(): MethodDecorator {
238+
return function (_target: unknown, _propertyKey: string, descriptor: PropertyDescriptor) {
239+
const original = descriptor.value;
240+
descriptor.value = function (...args: unknown[]) {
241+
const result = original.apply(this, args);
242+
this.grid.buildDataView();
243+
return result;
244+
}
245+
return descriptor;
246+
}
247+
}
248+
236249
/**
237250
* @hidden
238251
*/
@@ -241,6 +254,7 @@ export class IgxGridRowPinningPipe implements PipeTransform {
241254

242255
constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { }
243256

257+
@buildDataView()
244258
public transform(collection: any[], id: string, isPinned = false, _pipeTrigger: number) {
245259

246260
if (this.grid.hasPinnedRecords && isPinned) {

‎projects/igniteui-angular/src/lib/grids/common/strategy.ts‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { GridType } from './grid.interface';
1111
const DATE_TYPE = 'date';
1212
const TIME_TYPE = 'time';
1313
const DATE_TIME_TYPE = 'dateTime';
14+
const STRING_TYPE = 'string';
1415

1516
export interface IGridSortingStrategy {
1617
sort(data: any[], expressions: ISortingExpression[], grid?: GridType): any[];
@@ -43,7 +44,8 @@ export class IgxSorting implements IGridSortingStrategy {
4344
const column = grid ? grid.getColumnByName(expressions[level].fieldName) : null;
4445
const isDate = column?.dataType === DATE_TYPE || column?.dataType === DATE_TIME_TYPE;
4546
const isTime = column?.dataType === TIME_TYPE;
46-
const group = this.groupedRecordsByExpression(data, i, expressions[level], isDate);
47+
const isString = column?.dataType === STRING_TYPE;
48+
const group = this.groupedRecordsByExpression(data, i, expressions[level], isDate, isString);
4749
const groupRow: IGroupByRecord = {
4850
expression: expressions[level],
4951
level,
@@ -104,17 +106,24 @@ export class IgxSorting implements IGridSortingStrategy {
104106
data: T[],
105107
index: number,
106108
expression: IGroupingExpression,
107-
isDate: boolean = false
109+
isDate: boolean = false,
110+
isString: boolean
108111
): T[] {
109112
const res = [];
110113
const key = expression.fieldName;
111114
const len = data.length;
112-
const groupval = this.getFieldValue(data[index], key, isDate);
115+
let groupval = this.getFieldValue(data[index], key, isDate);
113116
res.push(data[index]);
114117
index++;
115118
const comparer = expression.groupingComparer || DefaultSortingStrategy.instance().compareValues;
116119
for (let i = index; i < len; i++) {
117-
if (comparer(this.getFieldValue(data[i], key, isDate), groupval) === 0) {
120+
let fieldValue = this.getFieldValue(data[i], key, isDate);
121+
if (expression.ignoreCase && isString) {
122+
// when column's dataType is string but the value is number
123+
fieldValue = fieldValue?.toString().toLowerCase();
124+
groupval = groupval?.toString().toLowerCase();
125+
}
126+
if (comparer(fieldValue, groupval) === 0) {
118127
res.push(data[i]);
119128
} else {
120129
break;
@@ -147,13 +156,14 @@ export class IgxSorting implements IGridSortingStrategy {
147156
const column = grid?.getColumnByName(expr.fieldName);
148157
const isDate = column?.dataType === DATE_TYPE || column?.dataType === DATE_TIME_TYPE;
149158
const isTime = column?.dataType === TIME_TYPE;
159+
const isString = column?.dataType === STRING_TYPE;
150160
data = expr.strategy.sort(data, expr.fieldName, expr.dir, expr.ignoreCase, this.getFieldValue, isDate, isTime);
151161
if (expressionIndex === exprsLen - 1) {
152162
return data;
153163
}
154164
// in case of multiple sorting
155165
for (i = 0; i < dataLen; i++) {
156-
gbData = this.groupedRecordsByExpression(data, i, expr, isDate);
166+
gbData = this.groupedRecordsByExpression(data, i, expr, isDate, isString);
157167
gbDataLen = gbData.length;
158168
if (gbDataLen > 1) {
159169
gbData = this.sortDataRecursive(gbData, expressions, expressionIndex + 1, grid);

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

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1159,7 +1159,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
11591159
}
11601160

11611161
public get headerSelectorContainer() {
1162-
return this.theadRow?.headerSelectorContainer;
1162+
return this.theadRow?.headerSelectorContainer;
11631163
}
11641164

11651165
public get headerDragContainer() {
@@ -2761,6 +2761,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
27612761
private _visibleColumns = [];
27622762
private _columnGroups = false;
27632763
private _autoGeneratedCols = [];
2764+
private _dataView = [];
27642765

27652766
private _columnWidth: string;
27662767

@@ -3237,7 +3238,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
32373238
this.onDensityChanged.pipe(destructor).subscribe(() => {
32383239
this.crudService.endEdit(false);
32393240
if (this._summaryRowHeight === 0) {
3240-
this.summaryService.summaryHeight = 0;
3241+
this.summaryService.summaryHeight = 0;
32413242
}
32423243
this.notifyChanges(true);
32433244
});
@@ -3430,18 +3431,21 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
34303431
*/
34313432
public setFilteredSortedData(data, pinned: boolean) {
34323433
data = data || [];
3433-
if (this.pinnedRecordsCount > 0 && pinned) {
3434-
this._filteredSortedPinnedData = data;
3435-
this.pinnedRecords = data;
3436-
this._filteredSortedData = this.isRowPinningToTop ? [... this._filteredSortedPinnedData, ... this._filteredSortedUnpinnedData] :
3437-
[... this._filteredSortedUnpinnedData, ... this._filteredSortedPinnedData];
3438-
this.refreshSearch(true, false);
3439-
} else if (this.pinnedRecordsCount > 0 && !pinned) {
3440-
this._filteredSortedUnpinnedData = data;
3434+
if (this.pinnedRecordsCount > 0) {
3435+
if (pinned) {
3436+
this._filteredSortedPinnedData = data;
3437+
this.pinnedRecords = data;
3438+
this._filteredSortedData = this.isRowPinningToTop ? [... this._filteredSortedPinnedData, ... this._filteredSortedUnpinnedData] :
3439+
[... this._filteredSortedUnpinnedData, ... this._filteredSortedPinnedData];
3440+
this.refreshSearch(true, false);
3441+
} else {
3442+
this._filteredSortedUnpinnedData = data;
3443+
}
34413444
} else {
34423445
this._filteredSortedData = data;
34433446
this.refreshSearch(true, false);
34443447
}
3448+
this.buildDataView();
34453449
}
34463450

34473451
/**
@@ -5115,10 +5119,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
51155119
* const dataView = this.grid.dataView;
51165120
* ```
51175121
*/
5118-
public get dataView(): any[] {
5119-
return this.isRowPinningToTop ?
5120-
[...this.pinnedDataView, ...this.unpinnedDataView] :
5121-
[...this.unpinnedDataView, ...this.pinnedDataView];
5122+
public get dataView() {
5123+
return this._dataView;
51225124
}
51235125

51245126
/**
@@ -6911,6 +6913,12 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
69116913
column.resetCaches();
69126914
}
69136915

6916+
private buildDataView() {
6917+
this._dataView = this.isRowPinningToTop ?
6918+
[...this.pinnedDataView, ...this.unpinnedDataView] :
6919+
[...this.unpinnedDataView, ...this.pinnedDataView];
6920+
}
6921+
69146922
private _applyWidthHostBinding() {
69156923
let width = this._width;
69166924
if (width === null) {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@
124124
<div class="igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}"></div>
125125
</ng-container>
126126
<ng-template
127-
[ngTemplateOutlet]='detailTemplate'
127+
[ngTemplateOutlet]='detailTemplate.first'
128128
[ngTemplateOutletContext]='getDetailsContext(rowData, rowIndex)'>
129129
</ng-template>
130130
</div>

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

Lines changed: 9 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -150,8 +150,8 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
150150
/**
151151
* @hidden @internal
152152
*/
153-
@ContentChild(IgxGridDetailTemplateDirective, { read: TemplateRef, static: false })
154-
public detailTemplate: TemplateRef<any> = null;
153+
@ContentChildren(IgxGridDetailTemplateDirective, { read: TemplateRef })
154+
public detailTemplate: QueryList<TemplateRef<any>> = new QueryList();
155155

156156
/**
157157
* @hidden @internal
@@ -200,12 +200,6 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
200200
@ContentChild(IgxGroupByRowTemplateDirective, { read: IgxGroupByRowTemplateDirective })
201201
protected groupTemplate: IgxGroupByRowTemplateDirective;
202202

203-
/**
204-
* @hidden @internal
205-
*/
206-
@ContentChild(IgxGridDetailTemplateDirective, { read: IgxGridDetailTemplateDirective, static: false })
207-
protected gridDetailsTemplate: IgxGridDetailTemplateDirective;
208-
209203
/**
210204
* @hidden
211205
* @internal
@@ -555,16 +549,6 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
555549
};
556550
}
557551

558-
/**
559-
* @hidden @internal
560-
*/
561-
public trackChanges(index, rec) {
562-
if (rec && rec.detailsData !== undefined) {
563-
return rec.detailsData;
564-
}
565-
return rec;
566-
}
567-
568552
/**
569553
* @hidden @internal
570554
*/
@@ -576,7 +560,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
576560
* @hidden @internal
577561
*/
578562
public get hasDetails() {
579-
return !!this.gridDetailsTemplate;
563+
return !!this.detailTemplate.length;
580564
}
581565

582566
/**
@@ -645,6 +629,9 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
645629
this.notifyChanges();
646630
}
647631

632+
/** @hidden @internal */
633+
public trackChanges: (index, rec) => any;
634+
648635
/**
649636
* Groups by a new `IgxColumnComponent` based on the provided expression, or modifies an existing one.
650637
*
@@ -938,6 +925,9 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
938925
this._groupRowTemplate = this.groupTemplate.template;
939926
}
940927

928+
this.detailTemplate.changes.subscribe(() =>
929+
this.trackChanges = (_, rec) => (rec?.detailsData !== undefined ? rec.detailsData : rec));
930+
941931
if (this.hideGroupedColumns && this.columnList && this.groupingExpressions) {
942932
this._setGroupColsVisibility(this.hideGroupedColumns);
943933
}

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

Lines changed: 73 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,8 @@ describe('IgxGrid - GroupBy #grid', () => {
3939
GroupByDataMoreColumnsComponent,
4040
GroupByEmptyColumnFieldComponent,
4141
MultiColumnHeadersWithGroupingComponent,
42-
GridGroupByRowCustomSelectorsComponent
42+
GridGroupByRowCustomSelectorsComponent,
43+
GridGroupByCaseSensitiveComponent
4344
],
4445
imports: [NoopAnimationsModule, IgxGridModule]
4546
});
@@ -63,7 +64,11 @@ describe('IgxGrid - GroupBy #grid', () => {
6364
if (level === maxLevel) {
6465
count++;
6566
}
66-
expect(rec[field]).toEqual(val);
67+
if (groupRow.groupRow.expression.ignoreCase) {
68+
expect(rec[field]?.toString().toLowerCase()).toEqual(val?.toString().toLowerCase());
69+
} else {
70+
expect(rec[field]).toEqual(val);
71+
}
6772
}
6873
}
6974
};
@@ -376,6 +381,30 @@ describe('IgxGrid - GroupBy #grid', () => {
376381
grid.groupingExpressions);
377382
}));
378383

384+
it('should group records correctly when ignoreCase is set to true.', fakeAsync(() => {
385+
const fix = TestBed.createComponent(GridGroupByCaseSensitiveComponent);
386+
fix.detectChanges();
387+
388+
// set groupingExpressions
389+
const grid = fix.componentInstance.instance;
390+
const exprs: ISortingExpression[] = [
391+
{ fieldName: 'ContactTitle', dir: SortingDirection.Asc, ignoreCase: true }
392+
];
393+
grid.groupingExpressions = exprs;
394+
tick();
395+
fix.detectChanges();
396+
397+
let groupRows = grid.groupsRowList.toArray();
398+
let dataRows = grid.dataRowList.toArray();
399+
400+
expect(groupRows.length).toEqual(2);
401+
expect(dataRows.length).toEqual(5);
402+
// verify groups
403+
checkGroups(groupRows,
404+
['Order Administrator', 'Owner'],
405+
grid.groupingExpressions);
406+
}));
407+
379408
it('should allow setting expand/collapse state', fakeAsync(() => {
380409
const fix = TestBed.createComponent(DefaultGridComponent);
381410
const grid = fix.componentInstance.instance;
@@ -3701,3 +3730,45 @@ export class GridGroupByRowCustomSelectorsComponent extends DataParent {
37013730
this.groupByRowClick = _event;
37023731
}
37033732
}
3733+
3734+
@Component({
3735+
template: `
3736+
<igx-grid
3737+
[width]='width'
3738+
[height]='height'
3739+
[data]="testData">
3740+
<igx-column [field]="'ID'" [header]="'ID'" [width]="200" [groupable]="true" [hasSummary]="false"></igx-column>
3741+
<igx-column [field]="'ContactTitle'" [header]="'ContactTitle'" [width]="200" [groupable]="true" [hasSummary]="false"
3742+
dataType="string"></igx-column>
3743+
</igx-grid>
3744+
`
3745+
})
3746+
export class GridGroupByCaseSensitiveComponent extends DataParent {
3747+
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
3748+
public instance: IgxGridComponent;
3749+
3750+
public width = '800px';
3751+
public height = null;
3752+
public testData = [
3753+
{
3754+
ID: 1,
3755+
ContactTitle: "Owner"
3756+
},
3757+
{
3758+
ID: 2,
3759+
ContactTitle: 'Order Administrator'
3760+
},
3761+
{
3762+
ID: 3,
3763+
ContactTitle: "owner"
3764+
},
3765+
{
3766+
ID: 4,
3767+
ContactTitle: "Owner"
3768+
},
3769+
{
3770+
ID: 5,
3771+
ContactTitle: 'Order Administrator'
3772+
}
3773+
];
3774+
}

0 commit comments

Comments
 (0)