Skip to content

Commit 4ac9aad

Browse files
rkaraivanovrkaraivanov
committed
feat(igxGrid): Column groups styling and refactor
Closes #488
1 parent 15be5c2 commit 4ac9aad

File tree

10 files changed

+134
-45
lines changed

10 files changed

+134
-45
lines changed

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

-1
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,6 @@ export class IgxGridCellComponent implements IGridBus, OnInit, OnDestroy, AfterV
154154
const isPercentageWidth = this.column.width && typeof this.column.width === 'string' && this.column.width.indexOf('%') !== -1;
155155
return this.isLastUnpinned && hasVerticalScroll && !!this.column.width && !isPercentageWidth ?
156156
(parseInt(this.column.width, 10) - 18) + 'px' : this.column.width;
157-
// return this.column.width;
158157
}
159158

160159
@HostBinding('class.igx-grid__td--editing')

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

+76-12
Original file line numberDiff line numberDiff line change
@@ -109,15 +109,16 @@ export class IgxColumnComponent implements AfterContentInit {
109109

110110
@Input()
111111
get index(): number {
112-
return this._index;
112+
return this.grid.columns.indexOf(this);
113+
// return this._index;
113114
}
114115

115-
set index(value: number) {
116-
if (this._index !== value) {
117-
this._index = value;
118-
this.check();
119-
}
120-
}
116+
// set index(value: number) {
117+
// if (this._index !== value) {
118+
// this._index = value;
119+
// this.check();
120+
// }
121+
// }
121122

122123
@Input()
123124
public formatter: (value: any) => any;
@@ -226,6 +227,9 @@ export class IgxColumnComponent implements AfterContentInit {
226227
get visibleIndex(): number {
227228
const grid = this.gridAPI.get(this.gridID);
228229
let vIndex = -1;
230+
if (this.columnGroup) {
231+
return vIndex;
232+
}
229233
if (!this.pinned) {
230234
const indexInCollection = grid.unpinnedColumns.indexOf(this);
231235
vIndex = indexInCollection === -1 ? -1 : grid.pinnedColumns.length + indexInCollection;
@@ -239,6 +243,10 @@ export class IgxColumnComponent implements AfterContentInit {
239243
return false;
240244
}
241245

246+
get allChildren(): IgxColumnComponent[] {
247+
return [];
248+
}
249+
242250
get level() {
243251
let ptr = this.parent;
244252
let lvl = 0;
@@ -263,7 +271,7 @@ export class IgxColumnComponent implements AfterContentInit {
263271
protected _hidden = false;
264272
protected _index: number;
265273

266-
private _defaultMinWidth = '88';
274+
protected _defaultMinWidth = '88';
267275

268276
@ContentChild(IgxCellTemplateDirective, { read: IgxCellTemplateDirective })
269277
protected cellTemplate: IgxCellTemplateDirective;
@@ -344,7 +352,7 @@ export class IgxColumnComponent implements AfterContentInit {
344352
// should be moved as a event parameter.
345353

346354
if (this.parent && !this.parent.pinned) {
347-
this.topLevelParent(this).pinned = true;
355+
this.topLevelParent.pinned = true;
348356
return;
349357
}
350358

@@ -380,7 +388,7 @@ export class IgxColumnComponent implements AfterContentInit {
380388

381389
protected _unpinColumn() {
382390
if (this.parent && this.parent.pinned) {
383-
this.topLevelParent(this).pinned = false;
391+
this.topLevelParent.pinned = false;
384392
return;
385393
}
386394

@@ -402,8 +410,8 @@ export class IgxColumnComponent implements AfterContentInit {
402410
this.updateHighlights(oldIndex, newIndex);
403411
}
404412

405-
public topLevelParent(column: IgxColumnComponent) {
406-
let parent = column.parent;
413+
get topLevelParent() {
414+
let parent = this.parent;
407415
while (parent && parent.parent) {
408416
parent = parent.parent;
409417
}
@@ -430,6 +438,53 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
430438
@ContentChildren(IgxColumnComponent, { read: IgxColumnComponent })
431439
children = new QueryList<IgxColumnComponent>();
432440

441+
@Input()
442+
public get summaries(): any {
443+
return this._summaries;
444+
}
445+
446+
public set summaries(classRef: any) {}
447+
448+
@Input()
449+
public searchable = true;
450+
451+
@Input()
452+
public get filters(): any {
453+
return this._filters;
454+
}
455+
public set filters(classRef: any) {}
456+
457+
get defaultMinWidth(): string {
458+
return this._defaultMinWidth;
459+
}
460+
461+
get bodyTemplate(): TemplateRef<any> {
462+
return this._bodyTemplate;
463+
}
464+
465+
set bodyTemplate(template: TemplateRef<any>) {}
466+
467+
get headerTemplate(): TemplateRef<any> {
468+
return this._headerTemplate;
469+
}
470+
471+
set headerTemplate(template: TemplateRef<any>) {}
472+
473+
get footerTemplate(): TemplateRef<any> {
474+
return this._headerTemplate;
475+
}
476+
477+
set footerTemplate(template: TemplateRef<any>) {}
478+
479+
get inlineEditorTemplate(): TemplateRef<any> {
480+
return this._inlineEditorTemplate;
481+
}
482+
483+
set inlineEditorTemplate(template: TemplateRef<any>) {}
484+
485+
get cells(): IgxGridCellComponent[] {
486+
return [];
487+
}
433488

434489
@Input()
435490
get hidden() {
@@ -452,6 +507,10 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
452507
});
453508
}
454509

510+
get allChildren(): IgxColumnComponent[] {
511+
return flatten(this.children.toArray());
512+
}
513+
455514
get columnGroup() {
456515
return true;
457516
}
@@ -462,3 +521,8 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
462521

463522
set width(val) {}
464523
}
524+
525+
526+
function flatten(arr: any[]) {
527+
return arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flatten(val)) : arr.concat(val), []);
528+
}

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

+23-19
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,16 @@
33
</ng-template>
44

55
<ng-container *ngIf="column.columnGroup">
6+
<span *ngIf="grid.hasMovableColumns" class="igx-grid__th-drop-indicator-left">
7+
</span>
68
<div class="igx-grid__thead-title">{{ column.header }}</div>
79
<div class="igx-grid__thead-group">
810
<ng-container *ngFor="let child of column.children">
911
<igx-grid-header *ngIf="!child.hidden" [gridID]="column.gridID" [column]="child" [style.min-width.px]="child.width" [style.flex-basis.px]='child.width'></igx-grid-header>
1012
</ng-container>
1113
</div>
14+
<span *ngIf="grid.hasMovableColumns" class="igx-grid__th-drop-indicator-right">
15+
</span>
1216
</ng-container>
1317

1418
<ng-container *ngIf="!column.columnGroup">
@@ -18,27 +22,27 @@
1822
<ng-container *ngTemplateOutlet="column.headerTemplate ? column.headerTemplate : defaultColumn; context: { $implicit: column }">
1923
</ng-container>
2024
</span>
21-
</ng-container>
25+
<div class="igx-grid__th-icons" *ngIf="!column.columnGroup">
26+
<igx-icon class="sort-icon" *ngIf="column.sortable">{{sortingIcon}}</igx-icon>
27+
<igx-grid-filter [column]="column" *ngIf="column.filterable"></igx-grid-filter>
28+
</div>
2229

23-
<div class="igx-grid__th-icons" *ngIf="!column.columnGroup">
24-
<igx-icon class="sort-icon" *ngIf="column.sortable">{{sortingIcon}}</igx-icon>
25-
<igx-grid-filter [column]="column" *ngIf="column.filterable"></igx-grid-filter>
26-
</div>
30+
<span *ngIf="!column.columnGroup" [style.cursor]="resizeCursor" #resizeArea
31+
class="igx-grid__th-resize-handle"
32+
(dblclick)="onResizeAreaDblClick()">
2733

28-
<span *ngIf="!column.columnGroup" [style.cursor]="resizeCursor" #resizeArea
29-
class="igx-grid__th-resize-handle"
30-
(dblclick)="onResizeAreaDblClick()">
34+
<div *ngIf="showResizer" igxResizer
35+
class="igx-grid__th-resize-line"
36+
[style.height.px]="resizerHeight"
37+
[restrictHResizeMax]="restrictResizeMax"
38+
[restrictHResizeMin]="restrictResizeMin"
39+
[resizeEndTimeout]="resizeEndTimeout"
40+
(resizeEnd)="onResize($event)">
41+
</div>
3142

32-
<div *ngIf="showResizer" igxResizer
33-
class="igx-grid__th-resize-line"
34-
[style.height.px]="resizerHeight"
35-
[restrictHResizeMax]="restrictResizeMax"
36-
[restrictHResizeMin]="restrictResizeMin"
37-
[resizeEndTimeout]="resizeEndTimeout"
38-
(resizeEnd)="onResize($event)">
39-
</div>
43+
</span>
4044

41-
</span>
45+
<span *ngIf="grid.hasMovableColumns" class="igx-grid__th-drop-indicator-right">
46+
</span>
47+
</ng-container>
4248

43-
<span *ngIf="grid.hasMovableColumns" class="igx-grid__th-drop-indicator-right">
44-
</span>

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

+8
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,14 @@ export class IgxGridHeaderComponent implements IGridBus, OnInit, DoCheck, AfterV
5050
return this.column.width;
5151
}
5252

53+
@HostBinding('style.height.px')
54+
get height() {
55+
if (this.grid.hasColumnGroups) {
56+
return (this.grid.maxLevelHeaderDepth + 1 - this.column.level) * this.grid.defaultRowHeight;
57+
}
58+
return null;
59+
}
60+
5361
@HostBinding('class.asc')
5462
get ascending() {
5563
return this.sortDirection === SortingDirection.Asc;

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

+18-7
Original file line numberDiff line numberDiff line change
@@ -473,6 +473,13 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af
473473
this.cdr.detectChanges();
474474
}
475475

476+
get maxLevelHeaderDepth() {
477+
if (this._maxLevelHeaderDepth === null) {
478+
this._maxLevelHeaderDepth = this.columnList.reduce((acc, col) => Math.max(acc, col.level), 0);
479+
}
480+
return this._maxLevelHeaderDepth;
481+
}
482+
476483
public pagingState;
477484
public calcWidth: number;
478485
public calcRowCheckboxWidth: number;
@@ -507,6 +514,7 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af
507514
protected _filteringLogic = FilteringLogic.And;
508515
protected _filteringExpressions = [];
509516
protected _sortingExpressions = [];
517+
protected _maxLevelHeaderDepth = null;
510518
private _filteredData = null;
511519
private resizeHandler;
512520
private columnListDiffer;
@@ -662,7 +670,7 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af
662670
}
663671

664672
get unpinnedColumns(): IgxColumnComponent[] {
665-
return this._unpinnedColumns.filter((col) => !col.hidden).sort((col1, col2) => col1.index - col2.index);
673+
return this._unpinnedColumns.filter((col) => !col.hidden); // .sort((col1, col2) => col1.index - col2.index);
666674
}
667675

668676
public getColumnByName(name: string): IgxColumnComponent {
@@ -728,10 +736,10 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af
728736

729737
if (dropTarget.pinned) {
730738
column.pinned = true;
731-
this._pinnedColumns.splice(toIndex, 0, column);
739+
// this._pinnedColumns.splice(toIndex, 0, column);
732740
} else {
733741
column.pinned = false;
734-
this._unpinnedColumns.splice(toIndex + 1, 0, column);
742+
// this._unpinnedColumns.splice(toIndex + 1, 0, column);
735743
}
736744
} else {
737745
const fromIndex = this._unpinnedColumns.indexOf(column);
@@ -991,6 +999,10 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af
991999
return this.columnList.some((col) => col.movable);
9921000
}
9931001

1002+
get hasColumnGroups(): boolean {
1003+
return this.columnList.some(col => col.columnGroup);
1004+
}
1005+
9941006
get selectedCells(): IgxGridCellComponent[] | any[] {
9951007
if (this.rowList) {
9961008
return this.rowList.map((row) => row.cells.filter((cell) => cell.selected))
@@ -1031,11 +1043,10 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af
10311043

10321044
protected calculateGridHeight() {
10331045
const computed = this.document.defaultView.getComputedStyle(this.nativeElement);
1034-
const maxHeadersDepth = this.columnList.reduce((acc, col) => Math.max(acc, col.level), 0);
10351046

10361047
// TODO: Calculate based on grid density
1037-
if (maxHeadersDepth) {
1038-
this.theadRow.nativeElement.style.height = `${(maxHeadersDepth + 1) * 50}px`;
1048+
if (this.maxLevelHeaderDepth) {
1049+
this.theadRow.nativeElement.style.height = `${(this.maxLevelHeaderDepth + 1) * this.defaultRowHeight}px`;
10391050
}
10401051

10411052
if (!this._height) {
@@ -1243,7 +1254,7 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af
12431254

12441255
collection.forEach((column: IgxColumnComponent, index: number) => {
12451256
column.gridID = this.id;
1246-
column.index = index;
1257+
// column.index = index;
12471258
if (!column.width) {
12481259
column.width = this.columnWidth;
12491260
}

‎projects/igniteui-angular/src/public_api.ts

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export * from './lib/animations/main';
1313
*/
1414
export * from './lib/core/navigation';
1515
export * from './lib/directives/button/button.directive';
16+
export * from './lib/directives/dragdrop/dragdrop.directive';
1617
export * from './lib/directives/filter/filter.directive';
1718
export * from './lib/directives/focus/focus.directive';
1819
export * from './lib/directives/for-of/for_of.directive';

‎src/app/drag-drop/drag-drop.sample.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ChangeDetectorRef, Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core';
1+
import { ChangeDetectorRef, Component } from '@angular/core';
22

33
@Component({
44
selector: 'app-drag-drop-sample',
@@ -7,9 +7,9 @@ import { ChangeDetectorRef, Component, OnInit, ViewChild, ChangeDetectionStrateg
77
})
88
export class DragDropSampleComponent {
99

10-
private draggingElem = false;
11-
private dragEnteredArea = false;
12-
private draggableElems = ['Suspect 1', 'Suspect 2', 'Suspect 3', 'Suspect 4'];
10+
draggingElem = false;
11+
dragEnteredArea = false;
12+
draggableElems = ['Suspect 1', 'Suspect 2', 'Suspect 3', 'Suspect 4'];
1313

1414
constructor(private cdr: ChangeDetectorRef) {
1515
}

‎src/app/grid-column-groups/grid-column-groups.sample.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="sample-wrapper">
22
<app-page-header title="Grid Column Groups"></app-page-header>
33
<section class="sample-content">
4-
<igx-grid [rowSelectable]="false" #grid height="600px" [data]="data" displayDensity="compact">
4+
<igx-grid [rowSelectable]="false" #grid height="1000px" [data]="data" displayDensity="compact">
55
<igx-column [pinned]="true" field="Missing"></igx-column>
66
<igx-column field="ID"></igx-column>
77
<igx-column-group [pinned]="true" header="General Information">

‎src/app/grid-column-groups/grid-column-groups.sample.ts

+2
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,8 @@ export class GridColumnGroupsSampleComponent {
4747
t.pinned = !t.pinned;
4848
const missing = this.grid.getColumnByName('Missing');
4949
missing.pinned = !missing.pinned;
50+
// this.grid.columnList.filter(c => c.columnGroup).forEach(g => console.log(g, g.allChildren));
51+
console.log(this.grid.pinnedColumns);
5052
}
5153

5254
hideGroup() {

‎src/app/grid-column-moving/grid-column-moving.sample.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -385,7 +385,7 @@ export class GridColumnMovingSampleComponent implements OnInit {
385385

386386
toggleColumn(name: string) {
387387
const col = this.grid1.getColumnByName(name);
388-
col.pinned ? col.unpin() : col.pin();
388+
col.pinned = !col.pinned;
389389
}
390390

391391
onColumnMovingStart(event) {

0 commit comments

Comments
 (0)