Skip to content

Commit ad55e82

Browse files
kdinevkdinev
authored
Merge branch 'master' into fix-sass-docs
2 parents cfa395e + 9d39cb5 commit ad55e82

File tree

9 files changed

+119
-47
lines changed

9 files changed

+119
-47
lines changed

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

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@ import { DisplayDensity } from '../core/displayDensity';
5555
template: ``
5656
})
5757
export class IgxColumnComponent implements AfterContentInit {
58+
private _filterable = true;
59+
private _groupable = false;
5860
/**
5961
* Sets/gets the `field` value.
6062
* ```typescript
@@ -105,7 +107,15 @@ export class IgxColumnComponent implements AfterContentInit {
105107
* @memberof IgxColumnComponent
106108
*/
107109
@Input()
108-
public groupable = false;
110+
public get groupable() {
111+
return this._groupable;
112+
}
113+
public set groupable(val) {
114+
this._groupable = val;
115+
if (this.grid) {
116+
this.grid.cdr.markForCheck();
117+
}
118+
}
109119
/**
110120
* Sets/gets whether the column is editable.
111121
* Default value is `false`.
@@ -131,7 +141,15 @@ export class IgxColumnComponent implements AfterContentInit {
131141
* @memberof IgxColumnComponent
132142
*/
133143
@Input()
134-
public filterable = true;
144+
public get filterable() {
145+
return this._filterable;
146+
}
147+
public set filterable(val) {
148+
this._filterable = val;
149+
if (this.grid) {
150+
this.grid.cdr.markForCheck();
151+
}
152+
}
135153
/**
136154
* Sets/gets whether the column is resizable.
137155
* Default value is `false`.
@@ -300,6 +318,8 @@ export class IgxColumnComponent implements AfterContentInit {
300318
this._width = value;
301319
if (this.grid) {
302320
this.cacheCalcWidth();
321+
(this.grid as any)._derivePossibleWidth();
322+
this.grid.cdr.markForCheck();
303323
}
304324
}
305325
}

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

Lines changed: 49 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,9 @@ import {
2323
ViewChildren,
2424
ViewContainerRef,
2525
InjectionToken,
26-
Optional
26+
Optional,
27+
OnChanges,
28+
SimpleChanges
2729
} from '@angular/core';
2830
import { Subject } from 'rxjs';
2931
import { takeUntil, first, filter } from 'rxjs/operators';
@@ -233,8 +235,10 @@ export enum GridKeydownTargetType {
233235
hierarchicalRow = 'hierarchicalRow'
234236
}
235237

236-
export abstract class IgxGridBaseComponent extends DisplayDensityBase implements OnInit, OnDestroy, AfterContentInit, AfterViewInit {
238+
export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
239+
OnInit, OnChanges, OnDestroy, AfterContentInit, AfterViewInit {
237240
private _scrollWidth: number;
241+
protected _init = true;
238242

239243
public get scrollWidth() {
240244
return this._scrollWidth;
@@ -634,12 +638,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
634638
if (this._height !== value) {
635639
this._height = value;
636640
this._autoSize = false;
637-
requestAnimationFrame(() => {
638-
if (!this._destroyed) {
639-
this.reflow();
640-
this.cdr.markForCheck();
641-
}
642-
});
641+
this.nativeElement.style.height = value;
643642
}
644643
}
645644

@@ -653,28 +652,13 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
653652
@WatchChanges()
654653
@HostBinding('style.width')
655654
@Input()
656-
public get width() {
655+
get width() {
657656
return this._width;
658657
}
659-
660-
/**
661-
* Sets the width of the `IgxGridComponent`.
662-
* ```html
663-
* <igx-grid #grid [data]="Data" [width]="'305px'" [autoGenerate]="true"></igx-grid>
664-
* ```
665-
* @memberof IgxGridBaseComponent
666-
*/
667-
public set width(value: string) {
658+
set width(value) {
668659
if (this._width !== value) {
669660
this._width = value;
670-
requestAnimationFrame(() => {
671-
// Calling reflow(), because the width calculation
672-
// might make the horizontal scrollbar appear/disappear.
673-
// This will change the height, which should be recalculated.
674-
if (!this._destroyed) {
675-
this.reflow();
676-
}
677-
});
661+
this.nativeElement.style.width = value;
678662
}
679663
}
680664

@@ -686,7 +670,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
686670
* @memberof IgxGridBaseComponent
687671
*/
688672
get headerWidth() {
689-
return parseInt(this._width, 10) - 17;
673+
return parseInt(this.width, 10) - 17;
690674
}
691675

692676
/**
@@ -2608,6 +2592,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
26082592
public summaryService: IgxGridSummaryService,
26092593
@Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
26102594
super(_displayDensityOptions);
2595+
this.cdr.detach();
26112596
this.resizeHandler = () => {
26122597
this.zone.run(() => this.calculateGridSizes());
26132598
};
@@ -2621,6 +2606,14 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
26212606
this.summaryService.grid = this;
26222607
}
26232608

2609+
ngOnChanges(changes: SimpleChanges) {
2610+
if (this._init) { return; }
2611+
const { height, width } = changes;
2612+
if (height || width) {
2613+
this.calculateGridSizes();
2614+
}
2615+
}
2616+
26242617
_setupListeners() {
26252618
const destructor = takeUntil(this.destroy$);
26262619

@@ -2672,7 +2665,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
26722665
this._setupServices();
26732666
this._setupListeners();
26742667
this.columnListDiffer = this.differs.find([]).create(null);
2675-
this.calcWidth = this._width && this._width.indexOf('%') === -1 ? parseInt(this._width, 10) : 0;
2668+
this.calcWidth = this.width && this.width.indexOf('%') === -1 ? parseInt(this.width, 10) : 0;
26762669
this.shouldGenerate = this.autoGenerate;
26772670
this._scrollWidth = this.getScrollWidth();
26782671
}
@@ -2827,6 +2820,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
28272820
}
28282821
});
28292822
});
2823+
this._init = false;
2824+
this.cdr.reattach();
28302825
}
28312826

28322827
private combineForOfCollections(dataList, summaryList) {
@@ -3965,7 +3960,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
39653960
* @hidden
39663961
*/
39673962
protected get isPercentWidth() {
3968-
return this._width && this._width.indexOf('%') !== -1;
3963+
return this.width && this.width.indexOf('%') !== -1;
39693964
}
39703965

39713966
/**
@@ -3988,6 +3983,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
39883983
column.defaultWidth = columnWidthCombined + 'px';
39893984
} else {
39903985
column.defaultWidth = this._columnWidth;
3986+
column.resetCaches();
39913987
}
39923988
});
39933989
this.resetCachedWidths();
@@ -4189,7 +4185,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
41894185
width = computed.getPropertyValue('width').indexOf('%') === -1 ?
41904186
parseInt(computed.getPropertyValue('width'), 10) : null;
41914187
} else {
4192-
width = parseInt(this._width, 10);
4188+
width = parseInt(this.width, 10);
41934189
}
41944190

41954191
if (!width && el) {
@@ -4348,7 +4344,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
43484344
protected getUnpinnedWidth(takeHidden = false) {
43494345
let width = this.isPercentWidth ?
43504346
this.calcWidth :
4351-
parseInt(this._width, 10);
4347+
parseInt(this.width, 10);
43524348
if (this.hasVerticalSroll() && !this.isPercentWidth) {
43534349
width -= this.scrollWidth;
43544350
}
@@ -4788,28 +4784,26 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
47884784
}
47894785

47904786
extractDataFromSelection(source: any[]): any[] {
4791-
let column: IgxColumnComponent;
4787+
let columnsArray: IgxColumnComponent[];
47924788
let record = {};
47934789
const selectedData = [];
47944790

47954791
const selectionMap = Array.from(this.selectionService.selection)
47964792
.filter((tuple) => tuple[0] < source.length);
47974793

4798-
const visibleColumns = this.visibleColumns
4799-
.filter(col => !col.columnGroup)
4800-
.sort((a, b) => a.visibleIndex - b.visibleIndex);
4801-
48024794

48034795
for (const [row, set] of selectionMap) {
48044796
if (!source[row]) {
48054797
continue;
48064798
}
48074799
const temp = Array.from(set);
48084800
for (const each of temp) {
4809-
column = visibleColumns[each];
4810-
if (column) {
4811-
record[column.field] = source[row][column.field];
4812-
}
4801+
columnsArray = this.getSelectableColumnsAt(each);
4802+
columnsArray.forEach((col) => {
4803+
if (col) {
4804+
record[col.field] = source[row][col.field];
4805+
}
4806+
});
48134807
}
48144808
if (Object.keys(record).length) {
48154809
selectedData.push(record);
@@ -4819,6 +4813,21 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
48194813
return selectedData;
48204814
}
48214815

4816+
protected getSelectableColumnsAt(index) {
4817+
if (this.hasColumnLayouts) {
4818+
const visibleLayoutColumns = this.visibleColumns
4819+
.filter(col => col.columnLayout)
4820+
.sort((a, b) => a.visibleIndex - b.visibleIndex);
4821+
const colLayout = visibleLayoutColumns[index];
4822+
return colLayout ? colLayout.children.toArray() : [];
4823+
} else {
4824+
const visibleColumns = this.visibleColumns
4825+
.filter(col => !col.columnGroup)
4826+
.sort((a, b) => a.visibleIndex - b.visibleIndex);
4827+
return [ visibleColumns[index] ];
4828+
}
4829+
}
4830+
48224831
getSelectedData() {
48234832
const source = this.verticalScrollContainer.igxForOf;
48244833

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1899,6 +1899,7 @@ describe('IgxGrid Component Tests', () => {
18991899

19001900
cell.inEditMode = true;
19011901
cell.update('IG');
1902+
fix.detectChanges();
19021903
cell.inEditMode = false;
19031904

19041905
await wait(DEBOUNCETIME);

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -394,6 +394,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
394394
@Input()
395395
set dropAreaMessage(value: string) {
396396
this._dropAreaMessage = value;
397+
this.cdr.markForCheck();
397398
}
398399

399400
/**

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2242,7 +2242,7 @@ describe('IgxGrid - GroupBy', () => {
22422242
const fix = TestBed.createComponent(DefaultGridComponent);
22432243
fix.detectChanges();
22442244

2245-
fix.componentInstance.instance.dropAreaTemplate = fix.componentInstance.dropAreaTemplate;
2245+
fix.componentInstance.currentDropArea = fix.componentInstance.dropAreaTemplate;
22462246
await wait();
22472247
fix.detectChanges();
22482248

@@ -2591,6 +2591,7 @@ describe('IgxGrid - GroupBy', () => {
25912591
<igx-grid
25922592
[width]='width'
25932593
[height]='height'
2594+
[dropAreaTemplate]='currentDropArea'
25942595
[data]="data"
25952596
[autoGenerate]="true" (onColumnInit)="columnsCreated($event)" (onGroupingDone)="onGroupingDoneHandler($event)">
25962597
</igx-grid>
@@ -2602,6 +2603,7 @@ describe('IgxGrid - GroupBy', () => {
26022603
export class DefaultGridComponent extends DataParent {
26032604
public width = '800px';
26042605
public height = null;
2606+
public currentDropArea;
26052607

26062608
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
26072609
public instance: IgxGridComponent;

‎projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1110,6 +1110,42 @@ describe('IgxGrid - multi-row-layout Integration - ', () => {
11101110
expect(groupRowBlocks[0].nativeElement.style.gridTemplateColumns).toEqual('200px 200px 650px 50px 100px 200px');
11111111
});
11121112
});
1113+
1114+
describe('Selection ', () => {
1115+
beforeEach(async(() => {
1116+
fixture = TestBed.createComponent(ColumnLayoutGroupingTestComponent);
1117+
fixture.detectChanges();
1118+
grid = fixture.componentInstance.grid;
1119+
colGroups = fixture.componentInstance.colGroups;
1120+
}));
1121+
1122+
it('should return correct selected data via getSelectedData API.', () => {
1123+
const selectedData1 = [{
1124+
ID: 'ALFKI',
1125+
CompanyName: 'Alfreds Futterkiste',
1126+
ContactName: 'Maria Anders',
1127+
ContactTitle: 'Sales Representative'
1128+
}];
1129+
const selectedData2 = [{
1130+
PostalCode: '05021',
1131+
City: 'México D.F.',
1132+
Country: 'Mexico',
1133+
Address: 'Avda. de la Constitución 2222'
1134+
}];
1135+
let cell = grid.getCellByColumn(0, 'CompanyName');
1136+
UIInteractions.clickElement(cell);
1137+
fixture.detectChanges();
1138+
1139+
expect(grid.getSelectedData()).toEqual(selectedData1);
1140+
1141+
cell = grid.getCellByColumn(1, 'City');
1142+
UIInteractions.clickElement(cell);
1143+
fixture.detectChanges();
1144+
1145+
expect(grid.getSelectedData()).toEqual(selectedData2);
1146+
});
1147+
});
1148+
11131149
});
11141150

11151151
@Component({

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -346,6 +346,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
346346
this.hierarchicalState = this.data.map((rec) => {
347347
return { rowID: this.primaryKey ? rec[this.primaryKey] : rec };
348348
});
349+
this.cdr.detectChanges();
349350
}
350351

351352
this.verticalScrollContainer.onBeforeViewDestroyed.pipe(takeUntil(this.destroy$)).subscribe((view) => {
@@ -372,9 +373,6 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
372373
});
373374
});
374375
this.childLayoutKeys = this.parentIsland.children.map((item) => item.key);
375-
} else {
376-
this.childLayoutKeys = this.childLayoutList.map((item) => item.key);
377-
this.cdr.detectChanges();
378376
}
379377

380378
this.toolbarCustomContentTemplates = this.parentIsland ?
@@ -398,6 +396,9 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
398396
*/
399397
ngAfterContentInit() {
400398
this.updateColumnList(false);
399+
this.childLayoutKeys = this.parent ?
400+
this.parentIsland.children.map((item) => item.key) :
401+
this.childLayoutKeys = this.childLayoutList.map((item) => item.key);
401402
this.childLayoutList.notifyOnChanges();
402403
this.childLayoutList.changes.pipe(takeUntil(this.destroy$))
403404
.subscribe(() => this.onRowIslandChange());

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -274,6 +274,7 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseComponent
274274
} else {
275275
this.rootGrid.hgridAPI.registerChildRowIsland(this);
276276
}
277+
this._init = false;
277278
}
278279

279280
/**

‎projects/igniteui-angular/src/lib/grids/watch-changes.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,11 @@ export function WatchChanges(): PropertyDecorator {
1414
const originalSetter = propDesc.set || (function (this: any, val: any) { this[privateKey] = val; });
1515

1616
propDesc.set = function (this: any, val: any) {
17+
const init = this._init;
1718
const oldValue = this[key];
1819
if (val !== oldValue || (typeof val === 'object' && val === oldValue)) {
1920
originalSetter.call(this, val);
20-
if (this.ngOnChanges) {
21+
if (this.ngOnChanges && !init) {
2122
// in case wacthed prop changes trigger ngOnChanges manually
2223
const changes: SimpleChanges = {
2324
[key]: new SimpleChange(oldValue, val, false)

0 commit comments

Comments
 (0)