Skip to content

Commit 75178ce

Browse files
rkaraivanovrkaraivanov
committed
feat(igxGrid): Column moving with multi headers
Closes #488
1 parent 1e91a05 commit 75178ce

File tree

4 files changed

+98
-46
lines changed

4 files changed

+98
-46
lines changed

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

+10-1
Original file line numberDiff line numberDiff line change
@@ -524,5 +524,14 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
524524

525525

526526
function flatten(arr: any[]) {
527-
return arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flatten(val)) : arr.concat(val), []);
527+
528+
let result = [];
529+
530+
arr.forEach(el => {
531+
result.push(el);
532+
if (el.children) {
533+
result = result.concat(flatten(el.children.toArray()));
534+
}
535+
});
536+
return result;
528537
}

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

+66-29
Original file line numberDiff line numberDiff line change
@@ -860,41 +860,79 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af
860860
return totalWidth;
861861
}
862862

863+
protected _moveColumns(from: IgxColumnComponent, to: IgxColumnComponent) {
864+
const list = this.columnList.toArray();
865+
const fi = list.indexOf(from);
866+
const ti = list.indexOf(to);
867+
list.splice(ti, 0, ...list.splice(fi, 1));
868+
const newList = this._regenerateColumns(list);
869+
this.columnList.reset(newList);
870+
this.columnList.notifyOnChanges();
871+
}
872+
873+
protected _regenerateColumns(list?) {
874+
if (!list) {
875+
list = this.columnList.toArray();
876+
}
877+
let newList = [];
878+
list.filter(c => c.level === 0).forEach(p => {
879+
newList.push(p);
880+
if (p.columnGroup) {
881+
newList = newList.concat(p.allChildren);
882+
}
883+
});
884+
return newList;
885+
}
886+
887+
protected _moveChildColumns(parent: IgxColumnComponent, from: IgxColumnComponent, to: IgxColumnComponent) {
888+
const buffer = parent.children.toArray();
889+
const fi = buffer.indexOf(from);
890+
const ti = buffer.indexOf(to);
891+
buffer.splice(ti, 0, ...buffer.splice(fi, 1));
892+
parent.children.reset(buffer);
893+
}
894+
863895
public moveColumn(column: IgxColumnComponent, dropTarget: IgxColumnComponent) {
864-
if (column.pinned) {
865-
const fromIndex = this._pinnedColumns.indexOf(column);
866896

867-
const toIndex = dropTarget.pinned ? this._pinnedColumns.indexOf(dropTarget) :
868-
this._unpinnedColumns.indexOf(dropTarget);
897+
if (column.level) {
898+
this._moveChildColumns(column.parent, column, dropTarget);
899+
}
900+
this._moveColumns(column, dropTarget);
869901

870-
this._pinnedColumns.splice(fromIndex, 1);
902+
// if (column.pinned) {
903+
// const fromIndex = this._pinnedColumns.indexOf(column);
871904

872-
if (dropTarget.pinned) {
873-
column.pinned = true;
874-
// this._pinnedColumns.splice(toIndex, 0, column);
875-
} else {
876-
column.pinned = false;
877-
// this._unpinnedColumns.splice(toIndex + 1, 0, column);
878-
}
879-
} else {
880-
const fromIndex = this._unpinnedColumns.indexOf(column);
905+
// const toIndex = dropTarget.pinned ? this._pinnedColumns.indexOf(dropTarget) :
906+
// this._unpinnedColumns.indexOf(dropTarget);
881907

882-
const toIndex = dropTarget.pinned ? this._pinnedColumns.indexOf(dropTarget) :
883-
this._unpinnedColumns.indexOf(dropTarget);
908+
// this._pinnedColumns.splice(fromIndex, 1);
884909

885-
this._unpinnedColumns.splice(fromIndex, 1);
910+
// if (dropTarget.pinned) {
911+
// column.pinned = true;
912+
// // this._pinnedColumns.splice(toIndex, 0, column);
913+
// } else {
914+
// column.pinned = false;
915+
// // this._unpinnedColumns.splice(toIndex + 1, 0, column);
916+
// }
917+
// } else {
918+
// const fromIndex = this._unpinnedColumns.indexOf(column);
886919

887-
if (dropTarget.pinned) {
888-
column.pinned = true;
889-
this._pinnedColumns.splice(toIndex, 0, column);
890-
} else {
891-
column.pinned = false;
892-
this._unpinnedColumns.splice(toIndex, 0, column);
893-
}
894-
}
920+
// const toIndex = dropTarget.pinned ? this._pinnedColumns.indexOf(dropTarget) :
921+
// this._unpinnedColumns.indexOf(dropTarget);
895922

896-
this.columnList.reset(this._pinnedColumns.concat(this._unpinnedColumns));
897-
this.columnList.notifyOnChanges();
923+
// this._unpinnedColumns.splice(fromIndex, 1);
924+
925+
// if (dropTarget.pinned) {
926+
// column.pinned = true;
927+
// this._pinnedColumns.splice(toIndex, 0, column);
928+
// } else {
929+
// column.pinned = false;
930+
// this._unpinnedColumns.splice(toIndex, 0, column);
931+
// }
932+
// }
933+
934+
// this.columnList.reset(this._pinnedColumns.concat(this._unpinnedColumns));
935+
// this.columnList.notifyOnChanges();
898936
}
899937

900938
public nextPage(): void {
@@ -1397,9 +1435,8 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af
13971435

13981436
// XXX: Deprecate index
13991437

1400-
collection.forEach((column: IgxColumnComponent, index: number) => {
1438+
collection.forEach((column: IgxColumnComponent) => {
14011439
column.gridID = this.id;
1402-
// column.index = index;
14031440
if (!column.width) {
14041441
column.width = this.columnWidth;
14051442
}

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

+21-15
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,33 @@
1-
<div class="sample-wrapper">
1+
<div class="sample-wrapper">
22
<app-page-header title="Grid Column Groups"></app-page-header>
3-
<section class="sample-content">
4-
<igx-grid [rowSelectable]="false" #grid height="600px" [data]="data" displayDensity="compact">
5-
<igx-column [movable]="true" [resizable]="true" [pinned]="false" field="Missing"></igx-column>
6-
<igx-column [movable]="true" [resizable]="true" field="ID"></igx-column>
3+
<section style="height: 800px" class="sample-content">
4+
<igx-grid [rowSelectable]="false" #grid [data]="data" displayDensity="compact">
75
<igx-column-group [movable]="true" [pinned]="false" header="General Information">
86
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="CompanyName"></igx-column>
97
<igx-column-group [movable]="true" header="Person Details">
108
<igx-column [movable]="true" [pinned]="false" filterable="true" sortable="true" resizable="true" field="ContactName"></igx-column>
119
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="ContactTitle"></igx-column>
1210
</igx-column-group>
1311
</igx-column-group>
14-
<igx-column-group header="Address Information">
15-
<igx-column-group header="Location">
16-
<igx-column filterable="true" sortable="true" resizable="true" field="Country"></igx-column>
17-
<igx-column filterable="true" sortable="true" resizable="true" field="Region"></igx-column>
18-
<igx-column filterable="true" sortable="true" resizable="true" field="City"></igx-column>
19-
<igx-column filterable="true" sortable="true" resizable="true" field="Address"></igx-column>
12+
<igx-column [movable]="true" [resizable]="true" [pinned]="false" field="Missing"></igx-column>
13+
<igx-column [movable]="true" [resizable]="true" field="ID"></igx-column>
14+
<igx-column-group [movable]="true" header="Address Information">
15+
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Country"></igx-column>
16+
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Region"></igx-column>
17+
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="City"></igx-column>
18+
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Address"></igx-column>
19+
</igx-column-group>
20+
<igx-column-group [movable]="true" header="Address Information">
21+
<igx-column-group [movable]="true" header="Location">
22+
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Country"></igx-column>
23+
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Region"></igx-column>
24+
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="City"></igx-column>
25+
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Address"></igx-column>
2026
</igx-column-group>
21-
<igx-column-group header="Contact Information">
22-
<igx-column filterable="true" sortable="true" resizable="true" field="Phone"></igx-column>
23-
<igx-column filterable="true" sortable="true" resizable="true" field="Fax"></igx-column>
24-
<igx-column filterable="true" sortable="true" resizable="true" field="PostalCode"></igx-column>
27+
<igx-column-group [movable]="true" header="Contact Information">
28+
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Phone"></igx-column>
29+
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Fax"></igx-column>
30+
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="PostalCode"></igx-column>
2531
</igx-column-group>
2632
</igx-column-group>
2733
<igx-column field="Missing"></igx-column>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export class GridColumnGroupsSampleComponent {
4848
const missing = this.grid.getColumnByName('Missing');
4949
missing.pinned = !missing.pinned;
5050
// this.grid.columnList.filter(c => c.columnGroup).forEach(g => console.log(g, g.allChildren));
51-
console.log(this.grid.pinnedColumns);
51+
// console.log(this.grid.pinnedColumns);
5252
}
5353

5454
hideGroup() {

0 commit comments

Comments
 (0)