Skip to content

Commit 9caf918

Browse files
zdrawkuzdrawku
authored
Merge branch 'master' into rkaraivanov/grid-clipboard-master
2 parents f4713ce + 27be555 commit 9caf918

File tree

10 files changed

+87
-47
lines changed

10 files changed

+87
-47
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
/// $content-text-color: rgba(0, 0, 0, .8)
3636
/// );
3737
/// // Pass the theme to the igx-card component mixin
38-
/// @include igx-calendar($my-card-theme);
38+
/// @include igx-card($my-card-theme);
3939
@function igx-card-theme(
4040
$palette: $default-palette,
4141
$schema: $light-schema,

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

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,13 @@
1919
///
2020
/// @param {Color} $sorted-header-icon-color [null] - The sort icon color when sorted.
2121
///
22+
/// @param {Color} $content-background [null] - The table body background color.
23+
/// @param {Color} $content-text-color [null] - The table body text color.
24+
///
2225
/// @param {Color} $ghost-header-text-color [null] - The dragged header text color.
2326
/// @param {Color} $ghost-header-icon-color [null] - The dragged header icon color.
2427
/// @param {Color} $ghost-header-background [null] - The dragged header background color.
25-
/// @param {Color} $content-background [null] - The table body background color.
26-
/// @param {Color} $content-text-color [null] - The table body text color.
28+
///
2729
/// @param {Color} $row-odd-background [null] - The background color of odd rows.
2830
/// @param {Color} $row-even-background [null] - The background color of even rows.
2931
/// @param {Color} $row-odd-text-color [null] - The text color of odd rows.
@@ -33,50 +35,64 @@
3335
/// @param {Color} $row-hover-background [null] - The hover row background color.
3436
/// @param {Color} $row-hover-text-color [null] - The hover row text color.
3537
/// @param {Color} $row-border-color [null] - The row bottom border color.
36-
/// @param {Color} $row-highlight [null] - The grid row highlight indication color.
38+
///
3739
/// @param {String} $pinned-border-width [null] - The border width of the pinned border.
3840
/// @param {String} $pinned-border-style [null] - The CSS border style of the pinned border.
3941
/// @param {Color} $pinned-border-color [null] - The color of the pinned border.
42+
///
4043
/// @param {Color} $cell-active-border-color [null] - The border color for the currently active(focused) cell.
4144
/// @param {Color} $cell-selected-background [null] - The selected cell background color.
4245
/// @param {Color} $cell-selected-text-color [null] - The selected cell text color.
46+
/// @param {Color} $cell-editing-background [null] - The background color of the cell being edited.
47+
/// @param {Color} $cell-edited-value-color [null] - The text color of a sell that has been edited.
48+
///
49+
/// @param {Color} $edit-mode-color [null] - The color applied around the row when in editing mode.
50+
/// @param {Color} $edited-row-indicator [null] - The color applied to the edited row indicator line.
51+
///
4352
/// @param {Color} $resize-line-color [null] - The table header resize line color.
53+
/// @param {Color} $drop-indicator-color [null] - The color applied to the line between the columns when dragging a column.
4454
///
4555
/// @param {Color} $grouparea-background [null] - The grid group area background color.
4656
///
4757
/// @param {Color} $group-row-background [null] - The grid group row background color.
4858
/// @param {Color} $group-row-selected-background [null] - The drop area background on drop color.
49-
/// @param {Color} $active-expand-icon-color [null] - The drop area background on drop color.
50-
/// @param {Color} $active-expand-icon-hover-color [null] - The drop area background on drop color.
5159
/// @param {Color} $group-label-column-name-text [null] - The grid group row column name text color.
5260
/// @param {Color} $group-label-icon [null] - The grid group row icon color.
5361
/// @param {Color} $group-label-text [null] - The grid group row text color.
5462
///
5563
/// @param {Color} $expand-all-icon-color [null] - The grid header expand all group rows icon color.
5664
/// @param {Color} $expand-all-icon-hover-color [null] - The grid header expand all group rows icon hover color.
65+
///
5766
/// @param {Color} $expand-icon-color [null] - The grid row expand icon color.
5867
/// @param {Color} $expand-icon-hover-color [null] - The grid row expand icon hover color.
68+
///
69+
/// @param {Color} $active-expand-icon-color [null] - The drop area background on drop color.
70+
/// @param {Color} $active-expand-icon-hover-color [null] - The drop area background on drop color.
71+
///
5972
/// @param {Color} $group-count-background [null] - The grid group row cont badge background color.
6073
/// @param {Color} $group-count-text-color [null] - The grid group row cont badge text color.
74+
///
6175
/// @param {Color} $drop-area-text-color [null] - The drop area text color.
6276
/// @param {Color} $drop-area-icon-color [null] - The drop area icon color.
6377
/// @param {Color} $drop-area-background [null] - The drop area background color.
6478
/// @param {Color} $drop-area-on-drop-background [null] - The drop area background on drop color.
65-
/// @param {Color} $tree-filtered-text-color [null] - grouping row background color on focus.
6679
///
6780
/// @param {Color} $filtering-header-background [null] - The background color of the filtered column header.
6881
/// @param {Color} $filtering-header-text-color [null] - The text color color of the filtered column header.
6982
/// @param {Color} $filtering-row-background [null] - The background color of the filtering row.
7083
/// @param {Color} $filtering-row-text-color [null] - The text-color color of the filtering row.
84+
/// @param {Color} $tree-filtered-text-color [null] - grouping row background color on focus.
7185
///
7286
/// @param {Color} $body-summaries-background [null] - The background color of the summary groups located the body.
7387
/// @param {Color} $body-summaries-text-color [null] - The text color of the summary results located the body.
7488
/// @param {Color} $root-summaries-background [null] - The background color of the summary groups located the footer.
7589
/// @param {Color} $root-summaries-text-color [null] - The text color of the summary results located the footer.
90+
///
91+
/// @param {Color} $row-highlight [null] - The grid row highlight indication color.
7692
/// @param {box-shadow} $grid-shadow [null] - The shadow of the grid.
7793
/// @param {box-shadow} $drag-shadow [null] - The shadow used for movable elements (ex. column headers).
78-
/// @param {color} $row-drag-color [null] - The row drag handle color.
7994
/// @param {color} $row-ghost-background [null] - The dragged row background color.
95+
/// @param {color} $row-drag-color [null] - The row drag handle color.
8096
/// @param {border-radius} $drop-area-border-radius [null] - The border radius used for column drop area.
8197
///
8298
/// @requires $default-palette
@@ -91,6 +107,7 @@
91107
@function igx-grid-theme(
92108
$palette: $default-palette,
93109
$schema: $light-schema,
110+
$elevations: $elevations,
94111
95112
$header-background: null,
96113
$header-text-color: null,
@@ -125,10 +142,10 @@
125142
$cell-selected-background: null,
126143
$cell-selected-text-color: null,
127144
$cell-editing-background: null,
145+
$cell-edited-value-color: null,
128146
129147
$edit-mode-color: null,
130148
$edited-row-indicator: null,
131-
$cell-edited-value-color: null,
132149
133150
$resize-line-color: null,
134151
$drop-indicator-color: null,

‎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: 27 additions & 31 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';
@@ -239,8 +241,10 @@ export enum GridKeydownTargetType {
239241
hierarchicalRow = 'hierarchicalRow'
240242
}
241243

242-
export abstract class IgxGridBaseComponent extends DisplayDensityBase implements OnInit, OnDestroy, AfterContentInit, AfterViewInit {
244+
export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
245+
OnInit, OnChanges, OnDestroy, AfterContentInit, AfterViewInit {
243246
private _scrollWidth: number;
247+
protected _init = true;
244248

245249
public get scrollWidth() {
246250
return this._scrollWidth;
@@ -640,12 +644,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
640644
if (this._height !== value) {
641645
this._height = value;
642646
this._autoSize = false;
643-
requestAnimationFrame(() => {
644-
if (!this._destroyed) {
645-
this.reflow();
646-
this.cdr.markForCheck();
647-
}
648-
});
647+
this.nativeElement.style.height = value;
649648
}
650649
}
651650

@@ -659,28 +658,13 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
659658
@WatchChanges()
660659
@HostBinding('style.width')
661660
@Input()
662-
public get width() {
661+
get width() {
663662
return this._width;
664663
}
665-
666-
/**
667-
* Sets the width of the `IgxGridComponent`.
668-
* ```html
669-
* <igx-grid #grid [data]="Data" [width]="'305px'" [autoGenerate]="true"></igx-grid>
670-
* ```
671-
* @memberof IgxGridBaseComponent
672-
*/
673-
public set width(value: string) {
664+
set width(value) {
674665
if (this._width !== value) {
675666
this._width = value;
676-
requestAnimationFrame(() => {
677-
// Calling reflow(), because the width calculation
678-
// might make the horizontal scrollbar appear/disappear.
679-
// This will change the height, which should be recalculated.
680-
if (!this._destroyed) {
681-
this.reflow();
682-
}
683-
});
667+
this.nativeElement.style.width = value;
684668
}
685669
}
686670

@@ -692,7 +676,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
692676
* @memberof IgxGridBaseComponent
693677
*/
694678
get headerWidth() {
695-
return parseInt(this._width, 10) - 17;
679+
return parseInt(this.width, 10) - 17;
696680
}
697681

698682
/**
@@ -2651,6 +2635,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
26512635
public summaryService: IgxGridSummaryService,
26522636
@Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
26532637
super(_displayDensityOptions);
2638+
this.cdr.detach();
26542639
this.resizeHandler = () => {
26552640
this.zone.run(() => this.calculateGridSizes());
26562641
};
@@ -2664,6 +2649,14 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
26642649
this.summaryService.grid = this;
26652650
}
26662651

2652+
ngOnChanges(changes: SimpleChanges) {
2653+
if (this._init) { return; }
2654+
const { height, width } = changes;
2655+
if (height || width) {
2656+
this.calculateGridSizes();
2657+
}
2658+
}
2659+
26672660
_setupListeners() {
26682661
const destructor = takeUntil(this.destroy$);
26692662

@@ -2715,7 +2708,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
27152708
this._setupServices();
27162709
this._setupListeners();
27172710
this.columnListDiffer = this.differs.find([]).create(null);
2718-
this.calcWidth = this._width && this._width.indexOf('%') === -1 ? parseInt(this._width, 10) : 0;
2711+
this.calcWidth = this.width && this.width.indexOf('%') === -1 ? parseInt(this.width, 10) : 0;
27192712
this.shouldGenerate = this.autoGenerate;
27202713
this._scrollWidth = this.getScrollWidth();
27212714
}
@@ -2870,6 +2863,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
28702863
}
28712864
});
28722865
});
2866+
this._init = false;
2867+
this.cdr.reattach();
28732868
}
28742869

28752870
private combineForOfCollections(dataList, summaryList) {
@@ -4008,7 +4003,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
40084003
* @hidden
40094004
*/
40104005
protected get isPercentWidth() {
4011-
return this._width && this._width.indexOf('%') !== -1;
4006+
return this.width && this.width.indexOf('%') !== -1;
40124007
}
40134008

40144009
/**
@@ -4031,6 +4026,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
40314026
column.defaultWidth = columnWidthCombined + 'px';
40324027
} else {
40334028
column.defaultWidth = this._columnWidth;
4029+
column.resetCaches();
40344030
}
40354031
});
40364032
this.resetCachedWidths();
@@ -4232,7 +4228,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
42324228
width = computed.getPropertyValue('width').indexOf('%') === -1 ?
42334229
parseInt(computed.getPropertyValue('width'), 10) : null;
42344230
} else {
4235-
width = parseInt(this._width, 10);
4231+
width = parseInt(this.width, 10);
42364232
}
42374233

42384234
if (!width && el) {
@@ -4391,7 +4387,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
43914387
protected getUnpinnedWidth(takeHidden = false) {
43924388
let width = this.isPercentWidth ?
43934389
this.calcWidth :
4394-
parseInt(this._width, 10);
4390+
parseInt(this.width, 10);
43954391
if (this.hasVerticalSroll() && !this.isPercentWidth) {
43964392
width -= this.scrollWidth;
43974393
}

‎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/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
/**

0 commit comments

Comments
 (0)