Skip to content

Commit 735a825

Browse files
rkaraivanovrkaraivanov
committed
feat(igxGrid): Column pinning and moving interaction
Closes #488
1 parent 03dc7a8 commit 735a825

File tree

6 files changed

+45
-61
lines changed

6 files changed

+45
-61
lines changed

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

+10-14
Original file line numberDiff line numberDiff line change
@@ -119,19 +119,10 @@ export class IgxColumnComponent implements AfterContentInit {
119119
@Input()
120120
public cellClasses = '';
121121

122-
@Input()
123122
get index(): number {
124123
return this.grid.columns.indexOf(this);
125-
// return this._index;
126124
}
127125

128-
// set index(value: number) {
129-
// if (this._index !== value) {
130-
// this._index = value;
131-
// this.check();
132-
// }
133-
// }
134-
135126
@Input()
136127
public formatter: (value: any) => any;
137128

@@ -270,6 +261,7 @@ export class IgxColumnComponent implements AfterContentInit {
270261
parent = null;
271262
children;
272263

264+
protected _unpinnedIndex;
273265
protected _pinned = false;
274266
protected _bodyTemplate: TemplateRef<any>;
275267
protected _headerTemplate: TemplateRef<any>;
@@ -357,7 +349,7 @@ export class IgxColumnComponent implements AfterContentInit {
357349
}
358350
}
359351

360-
protected _pinColumn() {
352+
public _pinColumn(index?) {
361353
// TODO: Probably should the return type of the old functions
362354
// should be moved as a event parameter.
363355

@@ -375,12 +367,13 @@ export class IgxColumnComponent implements AfterContentInit {
375367

376368
this._pinned = true;
377369
const oldIndex = this.visibleIndex;
378-
const index = grid._pinnedColumns.length;
370+
this._unpinnedIndex = grid._unpinnedColumns.indexOf(this);
371+
index = index !== undefined ? index : grid._pinnedColumns.length;
379372
const args = { column: this, insertAtIndex: index };
380373
grid.onColumnPinning.emit(args);
381374

382375
if (grid._pinnedColumns.indexOf(this) === -1) {
383-
grid._pinnedColumns.splice(index, 0, this);
376+
grid._pinnedColumns.splice(args.insertAtIndex, 0, this);
384377

385378
if (grid._unpinnedColumns.indexOf(this) !== -1) {
386379
grid._unpinnedColumns.splice(grid._unpinnedColumns.indexOf(this), 1);
@@ -390,30 +383,33 @@ export class IgxColumnComponent implements AfterContentInit {
390383
if (this.columnGroup) {
391384
this.children.forEach(child => child.pinned = true);
392385
}
386+
grid.reinitPinStates();
393387

394388
grid.markForCheck();
395389
const newIndex = this.visibleIndex;
396390
this.updateHighlights(oldIndex, newIndex);
397391
}
398392

399-
protected _unpinColumn() {
393+
public _unpinColumn(index?) {
400394
if (this.parent && this.parent.pinned) {
401395
this.topLevelParent.pinned = false;
402396
return;
403397
}
404398

405399
const grid = (this.grid as any);
406400
const oldIndex = this.visibleIndex;
401+
index = index !== undefined ? index : this._unpinnedIndex;
407402
this._pinned = false;
408403

409-
grid._unpinnedColumns.splice(this.index, 0, this);
404+
grid._unpinnedColumns.splice(index, 0, this);
410405
if (grid._pinnedColumns.indexOf(this) !== -1) {
411406
grid._pinnedColumns.splice(grid._pinnedColumns.indexOf(this), 1);
412407
}
413408

414409
if (this.columnGroup) {
415410
this.children.forEach(child => child.pinned = false);
416411
}
412+
grid.reinitPinStates();
417413

418414
grid.markForCheck();
419415
const newIndex = this.visibleIndex;

Diff for: ‎projects/igniteui-angular/src/lib/grid/column.spec.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -130,8 +130,8 @@ describe('IgxGrid - Column properties', () => {
130130
expect(headers[0].nativeElement.textContent).toMatch('ID');
131131
expect(headers[1].nativeElement.textContent).toMatch('Name');
132132

133-
grid.columnList.first.index = 1;
134-
grid.columnList.last.index = 0;
133+
134+
grid.moveColumn(grid.columnList.first, grid.columnList.last);
135135
fix.detectChanges();
136136

137137
expect(grid.columnList.first.index).toEqual(1);

Diff for: ‎projects/igniteui-angular/src/lib/grid/grid.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -56,9 +56,9 @@
5656
<div class="igx-grid__tfoot" role="rowgroup" [style.width.px]='calcWidth' #tfoot>
5757
<div *ngIf="hasSummarizedColumns" class="igx-grid__summaries" [style.height.px]="summariesHeight" [style.marginLeft.px]="summariesMargin" role="row" #summaries>
5858
<ng-container *ngIf="pinnedColumns.length > 0">
59-
<igx-grid-summary [gridID]="id" *ngFor="let col of pinnedColumns" [column]="col" [style.min-width.px]="col.width" [style.flex-basis.px]='col.width'></igx-grid-summary>
59+
<igx-grid-summary [gridID]="id" *ngFor="let col of notGroups(pinnedColumns)" [column]="col" [style.min-width.px]="col.width" [style.flex-basis.px]='col.width'></igx-grid-summary>
6060
</ng-container>
61-
<ng-template igxFor let-col [igxForOf]="unpinnedColumns" [igxForScrollOrientation]="'horizontal'" [igxForScrollContainer]="parentVirtDir" [igxForContainerSize]='unpinnedWidth' [igxForTrackBy]='trackColumnChanges' #summaryContainer>
61+
<ng-template igxFor let-col [igxForOf]="notGroups(unpinnedColumns)" [igxForScrollOrientation]="'horizontal'" [igxForScrollContainer]="parentVirtDir" [igxForContainerSize]='unpinnedWidth' [igxForTrackBy]='trackColumnChanges' #summaryContainer>
6262
<igx-grid-summary [gridID]="id" [column]="col" [style.min-width.px]="col.width" [style.flex-basis.px]='col.width'></igx-grid-summary>
6363
</ng-template>
6464
</div>

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

+27-35
Original file line numberDiff line numberDiff line change
@@ -264,6 +264,7 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af
264264
}
265265
}
266266

267+
@Input()
267268
public get displayDensity(): DisplayDensity | string {
268269
return this._displayDensity;
269270
}
@@ -918,12 +919,12 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af
918919
const fi = list.indexOf(from);
919920
const ti = list.indexOf(to);
920921
list.splice(ti, 0, ...list.splice(fi, 1));
921-
const newList = this._regenerateColumns(list);
922+
const newList = this._resetColumnList(list);
922923
this.columnList.reset(newList);
923924
this.columnList.notifyOnChanges();
924925
}
925926

926-
protected _regenerateColumns(list?) {
927+
protected _resetColumnList(list?) {
927928
if (!list) {
928929
list = this.columnList.toArray();
929930
}
@@ -950,42 +951,23 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af
950951
if (column.level) {
951952
this._moveChildColumns(column.parent, column, dropTarget);
952953
}
953-
this._moveColumns(column, dropTarget);
954-
955-
// if (column.pinned) {
956-
// const fromIndex = this._pinnedColumns.indexOf(column);
957-
958-
// const toIndex = dropTarget.pinned ? this._pinnedColumns.indexOf(dropTarget) :
959-
// this._unpinnedColumns.indexOf(dropTarget);
960954

961-
// this._pinnedColumns.splice(fromIndex, 1);
962-
963-
// if (dropTarget.pinned) {
964-
// column.pinned = true;
965-
// // this._pinnedColumns.splice(toIndex, 0, column);
966-
// } else {
967-
// column.pinned = false;
968-
// // this._unpinnedColumns.splice(toIndex + 1, 0, column);
969-
// }
970-
// } else {
971-
// const fromIndex = this._unpinnedColumns.indexOf(column);
972-
973-
// const toIndex = dropTarget.pinned ? this._pinnedColumns.indexOf(dropTarget) :
974-
// this._unpinnedColumns.indexOf(dropTarget);
955+
if (dropTarget.pinned && column.pinned) {
956+
const pinned = this._pinnedColumns;
957+
pinned.splice(pinned.indexOf(dropTarget), 0, ...pinned.splice(pinned.indexOf(column), 1));
958+
return;
959+
}
975960

976-
// this._unpinnedColumns.splice(fromIndex, 1);
961+
if (dropTarget.pinned && !column.pinned) {
962+
column._pinColumn(dropTarget.index);
963+
return;
964+
}
977965

978-
// if (dropTarget.pinned) {
979-
// column.pinned = true;
980-
// this._pinnedColumns.splice(toIndex, 0, column);
981-
// } else {
982-
// column.pinned = false;
983-
// this._unpinnedColumns.splice(toIndex, 0, column);
984-
// }
985-
// }
966+
if (!dropTarget.pinned && column.pinned) {
967+
column.pinned = false;
968+
}
986969

987-
// this.columnList.reset(this._pinnedColumns.concat(this._unpinnedColumns));
988-
// this.columnList.notifyOnChanges();
970+
this._moveColumns(column, dropTarget);
989971
}
990972

991973
public nextPage(): void {
@@ -1286,7 +1268,7 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af
12861268

12871269
// TODO: Calculate based on grid density
12881270
if (this.maxLevelHeaderDepth) {
1289-
this.theadRow.nativeElement.style.height = `${(this.maxLevelHeaderDepth + 1) * this.defaultRowHeight}px`;
1271+
this.theadRow.nativeElement.style.height = `${(this.maxLevelHeaderDepth + 1) * this.defaultRowHeight + 1}px`;
12901272
}
12911273

12921274
if (!this._height) {
@@ -1500,6 +1482,12 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af
15001482
}
15011483
});
15021484
this._columns = this.columnList.toArray();
1485+
// this._pinnedColumns = this.columnList.filter((c) => c.pinned);
1486+
// this._unpinnedColumns = this.columnList.filter((c) => !c.pinned);
1487+
this.reinitPinStates();
1488+
}
1489+
1490+
protected reinitPinStates() {
15031491
this._pinnedColumns = this.columnList.filter((c) => c.pinned);
15041492
this._unpinnedColumns = this.columnList.filter((c) => !c.pinned);
15051493
}
@@ -1851,4 +1839,8 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af
18511839
this.find(this.lastSearchInfo.searchText, 0, this.lastSearchInfo.caseSensitive, false);
18521840
}
18531841
}
1842+
1843+
notGroups(arr) {
1844+
return arr.filter(c => !c.columnGroup);
1845+
}
18541846
}

Diff for: ‎src/app/grid-column-groups/grid-column-groups.sample.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
<app-page-header title="Grid Column Groups"></app-page-header>
33
<section style="height: 800px" class="sample-content">
44
<igx-grid [rowSelectable]="false" #grid [data]="data" displayDensity="compact">
5+
<igx-column [movable]="true" [hasSummary]="true" [resizable]="true" [pinned]="true" field="Missing"></igx-column>
56
<igx-column-group [movable]="true" [pinned]="false" header="General Information">
67
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="CompanyName"></igx-column>
78
<igx-column-group [movable]="true" header="Person Details">
89
<igx-column [movable]="true" [pinned]="false" filterable="true" sortable="true" resizable="true" field="ContactName"></igx-column>
9-
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="ContactTitle"></igx-column>
10+
<igx-column [movable]="true" [hasSummary]="true" filterable="true" sortable="true" resizable="true" field="ContactTitle"></igx-column>
1011
</igx-column-group>
1112
</igx-column-group>
12-
<igx-column [movable]="true" [resizable]="true" [pinned]="false" field="Missing"></igx-column>
13-
<igx-column [movable]="true" [resizable]="true" field="ID"></igx-column>
13+
<igx-column [movable]="true" [hasSummary]="true" [resizable]="true" field="ID" editable="true"></igx-column>
1414
<igx-column-group [movable]="true" header="Address Information">
1515
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Country"></igx-column>
1616
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Region"></igx-column>

Diff for: ‎src/app/grid-column-groups/grid-column-groups.sample.ts

+1-5
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,8 @@ export class GridColumnGroupsSampleComponent {
4343
// tslint:enable:max-line-length
4444

4545
pinGroup() {
46-
const t = this.grid.columnList.filter(c => c.header === 'General Information')[0];
46+
const t = this.grid.getColumnByName('ID');
4747
t.pinned = !t.pinned;
48-
const missing = this.grid.getColumnByName('Missing');
49-
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);
5248
}
5349

5450
hideGroup() {

0 commit comments

Comments
 (0)