Sort columns via column chips.

Author: MKirova

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

@@ -19,12 +19,13 @@ import { GridType } from '../common/grid.interface';
 import { IgxGridNavigationService } from '../grid-navigation.service';
 import { IgxGridCRUDService } from '../common/crud.service';
 import { IgxGridSummaryService } from '../summaries/grid-summary.service';
-import { IPivotConfiguration, IPivotKeys, PivotDimensionType } from './pivot-grid.interface';
+import { IPivotConfiguration, IPivotDimension, IPivotKeys, PivotDimensionType } from './pivot-grid.interface';
 import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
 import { IgxColumnGroupComponent } from '../columns/column-group.component';
 import { IgxColumnComponent } from '../columns/column.component';
 import { PivotUtil } from './pivot-util';
 import { NoopPivotDimensionsStrategy } from '../../data-operations/pivot-strategy';
+import { SortingDirection } from '../../data-operations/sorting-expression.interface';
 
 let NEXT_ID = 0;
 const MINIMUM_COLUMN_WIDTH = 200;
@@ -351,7 +352,17 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         const factoryColumn = this.resolver.resolveComponentFactory(IgxColumnComponent);
         const factoryColumnGroup = this.resolver.resolveComponentFactory(IgxColumnGroupComponent);
         let columns = [];
-        fields.forEach((value, key) => {
+        if (fields.size === 0) {
+            return columns;
+        }
+        const first = fields.keys().next().value;
+        const dim: IPivotDimension = fields.get(first).dimension;
+        let currentFields = fields;
+        if (dim.sortDirection) {
+            const reverse = (dim.sortDirection === SortingDirection.Desc ? -1 : 1);
+            currentFields = new Map([...fields.entries()].sort((a, b) => reverse * (a > b ? 1 : a < b ? -1 : 0)));
+        }
+        currentFields.forEach((value, key) => {
             if (value.children == null || value.children.length === 0 || value.children.size === 0) {
                 const ref = this.hasMultipleValues ?
                     factoryColumnGroup.create(this.viewRef.injector) :

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html

@@ -14,11 +14,9 @@
                     (dragOver)="onDimDragOver($event, 2)"
                     (dragLeave)="onDimDragLeave($event)"
                     (dragDrop)="onDimDrop($event, filterArea, 2)"
-                    (click)="onChipSort($event, filter)"
                      >
                     <igx-icon igxPrefix>filter_list</igx-icon>
                     {{filter.memberName}}
-                    <igx-icon *ngIf="filter.sortDirection"  igxSuffix> {{ filter.sortDirection < 2 ? 'arrow_upward' : 'arrow_downward' }}</igx-icon>
                 </igx-chip>
             </igx-chips-area>
         </div>
@@ -36,7 +34,7 @@
                         (dragOver)="onDimDragOver($event, 1)"
                         (dragLeave)="onDimDragLeave($event)"
                         (dragDrop)="onDimDrop($event, colArea, 1)"
-                        (click)="onChipSort($event, col)"
+                        (click)="onChipSort($event, col, 1)"
                         >
                         <igx-icon igxPrefix>view_column</igx-icon>
                         <igx-icon igxPrefix>filter_list</igx-icon>
@@ -90,7 +88,7 @@
                         (dragLeave)="onDimDragLeave($event)"
                         (dragDrop)="onDimDrop($event, rowArea, 0)"
                         (dragOver)="onDimDragOver($event, 0)"
-                        (click)="onChipSort($event, row)">
+                        (click)="onChipSort($event, row, 0)">
                         <igx-icon igxPrefix>table_rows</igx-icon>
                         <igx-icon igxPrefix>filter_list</igx-icon>
                         {{ row.memberName}}

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts

@@ -76,7 +76,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
         filter.enabled = false;
     }
 
-    public onChipSort(event, dimension: IPivotDimension) {
+    public onChipSort(event, dimension: IPivotDimension, dimensionType: PivotDimensionType) {
         if (!dimension.sortDirection) {
             dimension.sortDirection = SortingDirection.None;
         }
@@ -89,6 +89,9 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
             dim = dim.childLevel;
         }
         this.grid.pipeTrigger++;
+        if (dimensionType === PivotDimensionType.Column) {
+            this.grid.setupColumns();
+        }
     }
 
     public onDimDragOver(event, dimension?: PivotDimensionType) {

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-util.ts

@@ -156,7 +156,7 @@ export class PivotUtil {
             const value = this.extractValueFromDimension(col, recData);
             path.push(value);
             const newValue = path.join('-');
-            lvlCollection.push({ value: newValue });
+            lvlCollection.push({ value: newValue, dimension: col });
             lvlCollection[0].expandable = col.expandable;
             if (!lvlCollection[0].children) {
                 lvlCollection[0].children = [];

src/app/pivot-grid/pivot-grid.sample.ts

@@ -23,10 +23,14 @@ export class PivotGridSampleComponent {
 
     public pivotConfigHierarchy: IPivotConfiguration = {
         columns: [
-
             {
-                memberName: 'Country',
-                enabled: true
+                memberName: 'AllCountries',
+                memberFunction: () => 'AllCountries',
+                enabled: true,
+                childLevel: {
+                    memberName: 'Country',
+                    enabled: true
+                }
             }
         ]
         ,