Move row dimension column gen in row.

Author: MKirova

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

@@ -172,44 +172,5 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         };
     }
 
-    public get pivotRows() {
-        // TODO - resolve member if member is not string.
-        const rowKeys = this.pivotConfiguration.rows.map(x => x.member);
-        const cols = this.columns.filter(x => rowKeys.indexOf(x.field) !== -1);
-        // create copies in order to not pollute the original column.
-        const columns = [];
-        const topLevelCols = cols.filter(c => c.level === 0);
-        topLevelCols.forEach((col) => {
-            const ref = this._createColumn(col);
-            ref.changeDetectorRef.detectChanges();
-            columns.push(ref.instance);
-        });
-        return columns;
-    }
-
-    public get pivotRowWidths() {
-        let width = 0;
-        this.pivotRows.forEach(col => {
-            width += col.calcWidth;
-        });
-        return width;
-    }
-
-    public get pivotColumns() {
-        // TODO - resolve member if member is not string.
-        const rowKeys = this.pivotConfiguration.rows.map(x => x.member);
-        return this.columns.filter(x => rowKeys.indexOf(x.field) === -1);
-    }
-
-    public get unpinnedColumns(){
-        const rowKeys = this.pivotConfiguration.rows.map(x => x.member);
-        const cols = this._unpinnedColumns.filter(x => rowKeys.indexOf(x.field) === -1);
-        return cols;
-    }
 
-    public get pinnedColumns(){
-        const rowKeys = this.pivotConfiguration.rows.map(x => x.member);
-        const cols = this._pinnedColumns.filter(x => rowKeys.indexOf(x.field) === -1);
-        return cols;
-    }
 }

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

@@ -4,7 +4,7 @@
     <!-- Column headers area -->
     <div class="igx-grid__tr" role="row" [style.width.px]="width">
 
-        <ng-container *ngIf="grid.pivotConfiguration?.rows.length > 0 ">
+        <ng-container *ngIf="!row">
             <div #pivotContainer class="igx-grid__tr-action" [style.min-width] = "grid.pivotRowWidths" 
                 (pointerdown)="$event.preventDefault()">
 

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

@@ -1,8 +1,10 @@
 import {
     ChangeDetectionStrategy,
-    Component
+    Component,
+    Input
 } from '@angular/core';
 import { IgxGridHeaderRowComponent } from '../headers/grid-header-row.component';
+import { IgxPivotRowComponent } from './pivot-row.component';
 
 export interface IgxGridRowSelectorsTemplateContext {
     $implicit: {
@@ -27,4 +29,6 @@ export interface IgxGridRowSelectorsTemplateContext {
     templateUrl: './pivot-header-row.component.html'
 })
 export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
+    @Input()
+    public row: IgxPivotRowComponent;
 }

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

@@ -1,16 +1,16 @@
     <!-- Row Dimension -->
-    <div #rowDimension>
-            <!-- TODO: Render headers based on hierarchy here -->
-            <igx-grid-header-row class="igx-grid-thead" tabindex="0"
+    <div #rowDimensionContainer>
+            <igx-pivot-header-row class="igx-grid-thead" tabindex="0"
             [grid]="grid"
             [hasMRL]="grid.hasColumnLayouts"
             [density]="grid.displayDensity"
             [activeDescendant]="grid.activeDescendant"
-            [width]="getRowColumnWidth(grid.pivotRows)"
-            [unpinnedColumnCollection]="getRowColumns(rowData, grid.pivotRows)"
+            [width]="pivotRowWidths"
+            [unpinnedColumnCollection]="rowDimension"
             (scroll)="grid.preventHeaderScroll($event)"
+            [row]="this"
         >
-        </igx-grid-header-row>
+        </igx-pivot-header-row>
     </div>
 
 

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

@@ -1,19 +1,39 @@
 import {
     ChangeDetectionStrategy,
+    ChangeDetectorRef,
     Component,
-    forwardRef
+    ComponentFactoryResolver,
+    ElementRef,
+    forwardRef,
+    OnInit,
+    ViewContainerRef
 } from '@angular/core';
 import { IgxPivotGridComponent } from './pivot-grid.component';
 import { IgxRowDirective } from '../row.directive';
-import { IgxColumnComponent } from '../hierarchical-grid/public_api';
+import { GridBaseAPIService, IgxColumnComponent } from '../hierarchical-grid/public_api';
+import { IgxGridSelectionService } from '../selection/selection.service';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
     selector: 'igx-pivot-row',
     templateUrl: './pivot-row.component.html',
     providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxPivotRowComponent) }]
 })
-export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent> {
+export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent> implements OnInit {
+
+
+    public rowDimension: IgxColumnComponent[] = [];
+
+    constructor(
+        public gridAPI: GridBaseAPIService<IgxPivotGridComponent>,
+        public selectionService: IgxGridSelectionService,
+        public element: ElementRef<HTMLElement>,
+        public cdr: ChangeDetectorRef,
+        protected resolver: ComponentFactoryResolver,
+        protected viewRef: ViewContainerRef
+    ){
+        super(gridAPI, selectionService, element, cdr);
+    }
 
     /**
      * @hidden
@@ -23,22 +43,34 @@ export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent>
         return this.index;
     }
 
-    public getRowColumns(rowData, cols: IgxColumnComponent[]) {
-        cols.forEach(col => {
-            col.header = rowData[col.field];
-            col.field =  rowData[col.field];
-            col.title = rowData[col.field];
-            (col as any)._vIndex = this.grid.columns.length + this.index;
-        });
-        return cols;
-    }
-
-    public getRowColumnWidth(cols: IgxColumnComponent[]) {
+    public get pivotRowWidths() {
         let width = 0;
-        cols.forEach(col => {
+        this.rowDimension.forEach(col => {
             width += col.calcWidth;
         });
         return width;
     }
+
+    public ngOnInit() {
+        // generate rowDimension
+        const rowDimConfig = this.grid.pivotConfiguration.rows;
+        let field = null;
+        for (const dim of rowDimConfig) {
+            if (typeof dim.member === 'string') {
+                field = this.rowData[dim.member];
+            } else if (typeof dim.member === 'function'){
+                field = dim.member.call(this, this.rowData);
+            }
+            const col = this._createColComponent(field);
+            this.rowDimension.push(col);
+        }
+    }
+
+    protected _createColComponent(field: string) {
+        const factoryColumn = this.resolver.resolveComponentFactory(IgxColumnComponent);
+        const ref = this.viewRef.createComponent(factoryColumn, null, this.viewRef.injector);
+        ref.instance.field = field;
+        return ref.instance;
+    }
 }
 

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

@@ -19,7 +19,7 @@ export class PivotGridSampleComponent {
             childLevels:[]
         }],
         rows: [{
-            member: 'ProductCategory',
+            member: (data) => data.ProductCategory,
             enabled: true,
             childLevels:[]
         }],