Merge branch 'master' into dpetev/paging-internal-api-refactor

Author: hanastasov

CHANGELOG.md

@@ -8,9 +8,9 @@ All notable changes for each version of this project will be documented in this
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`:
     - `GroupMemberCountSortingStrategy` is added, which can be used to sort the grid by number of items in each group in ASC or DESC order, if grouping is applied.
     - A new argument `primaryKey` has been introduced to `IRowDataEventArgs` Interface and part of the event arguments that are emitted by the `rowAdded` and `rowDeleted` events. When the grid has a primary key attribute added, then the emitted `primaryKey` event argument represents the row ID, otherwise it defaults to undefined.
+    - Added the `autoGenerateExclude` property that accepts an array of strings for property names that are to be excluded from the generated column collection
 - `IgxColumnComponent`
     - Added `currRec` and `groupRec` parameters to the `groupingComparer` function that give access to the all properties of the compared records.
-
 - `IgxOverlayService`
     -A new event `contentAppending` is introduced - the event is emitted before the content is appended to the overlay. The event is emitted with `OverlayEventArgs` arguments and is not cancellable.
 
@@ -19,6 +19,7 @@ All notable changes for each version of this project will be documented in this
     - The `IgxPivotDateDimension` properties `inBaseDimension` and `inOption` have been deprecated and renamed to `baseDimension` and `options` respectively.
  - `IgxGrid`
     - **Breaking Change** The `onGroupingDone` output has been renamed to `groupingDone` to not violate the no on-prefixed outputs convention. Automatic migrations are available and will be applied on `ng update`.
+    - Column formatters are now applied to values shown group rows when using the default template. For custom formatters, the formatter function is called with the data from the first row in the group.
  - `DisplayDensity`
     - **Breaking Change** The `onDensityChanged` output has been renamed to `densityChanged` to not violate the no on-prefixed outputs convention. All components exposing this event are affected. Automatic migrations are available and will be applied on `ng update`.
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`

projects/igniteui-angular/migrations/update-15_1_0/changes/members.json

@@ -166,6 +166,7 @@ Below is the list of all inputs that the developers may set to configure the gri
 |`data`|Array|The data source for the grid.|
 |`resourceStrings`| IGridResourceStrings | Resource strings of the grid. |
 |`autoGenerate`|boolean|Autogenerate grid's columns, default value is _false_|
+|`autoGenerateExclude`|Array|A list of property keys to be excluded from the generated column collection, default is _[]_|
 |`batchEditing`|boolean|Toggles batch editing in the grid, default is _false_|
 |`moving`|boolean|Enables the columns moving feature. Defaults to _false_|
 |`paging`|boolean|Enables the paging feature. Defaults to _false_.|

projects/igniteui-angular/src/lib/grids/README.md

@@ -212,6 +212,23 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     @Input()
     public autoGenerate = false;
 
+    /**
+     * Gets/Sets a list of property keys to be excluded from the generated column collection
+     * @remarks
+     * The collection is only used during initialization and changing it will not cause any changes in the generated columns at runtime
+     * unless the grid is destroyed and recreated. To modify the columns visible in the UI at runtime, please use their
+     * [hidden](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxColumnComponent.html#hidden) property.
+     * @example
+     * ```html
+     * <igx-grid data=[Data] [autoGenerate]="true" [autoGenerateExclude]="['ProductName', 'Count']"></igx-grid>
+     * ```
+     * ```typescript
+     * const Data = [{ 'Id': '1', 'ProductName': 'name1', 'Description': 'description1', 'Count': 5 }]
+     * ```
+     */
+    @Input()
+    public autoGenerateExclude: string[] = [];
+
     /**
      * Controls whether columns moving is enabled in the grid.
      *
@@ -7159,7 +7176,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     protected generateDataFields(data: any[]): string[] {
-        return Object.keys(data && data.length !== 0 ? data[0] : []);
+        return Object.keys(data && data.length !== 0 ? data[0] : [])
+            .filter(key => !this.autoGenerateExclude.includes(key));
     }
 
     /**

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -116,6 +116,20 @@ describe('IgxGrid Component Tests #grid', () => {
             });
         });
 
+        it('should skip properties from autoGenerateExclude when auto-generating columns', () => {
+            const fix = TestBed.createComponent(IgxGridTestComponent);
+            fix.componentInstance.data = [
+                { Number: 1, String: '1', Boolean: true, Date: new Date(Date.now()) }
+            ];
+            fix.componentInstance.autoGenerateExclude = ['Date', 'String'];
+            fix.componentInstance.columns = [];
+            fix.componentInstance.autoGenerate = true;
+            fix.detectChanges();
+            const grid = fix.componentInstance.grid;
+
+            expect(grid.columns.map(col => col.field)).toEqual(['Number', 'Boolean'], 'Invalid columns after exclusion initialized');
+        });
+
         it('should initialize a grid and allow changing columns runtime with ngFor', () => {
             const fix = TestBed.createComponent(IgxGridTestComponent);
             fix.detectChanges();
@@ -2707,7 +2721,7 @@ describe('IgxGrid Component Tests #grid', () => {
 
 @Component({
     template: `<div style="width: 800px; height: 600px;">
-        <igx-grid #grid [data]="data" [autoGenerate]="autoGenerate" (columnInit)="columnCreated($event)">
+        <igx-grid #grid [data]="data" [autoGenerate]="autoGenerate" [autoGenerateExclude]="autoGenerateExclude" (columnInit)="columnCreated($event)">
             <igx-column *ngFor="let column of columns;" [field]="column.field" [hasSummary]="column.hasSummary"
                 [header]="column.field" [width]="column.width">
             </igx-column>
@@ -2724,6 +2738,8 @@ export class IgxGridTestComponent {
 
     public autoGenerate = false;
 
+    public autoGenerateExclude = [];
+
     public columnEventCount = 0;
 
     constructor(public cdr: ChangeDetectorRef) { }

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

@@ -1,4 +1,5 @@
 import { Component, ViewChild, TemplateRef, QueryList } from '@angular/core';
+import { formatNumber } from '@angular/common'
 import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -788,7 +789,7 @@ describe('IgxGrid - GroupBy #grid', () => {
         fix.detectChanges();
         grid.groupBy({
             fieldName: 'ReleaseDate', dir: SortingDirection.Asc, ignoreCase: false
-        }); 
+        });
         fix.detectChanges();
         spyOn(grid.groupingExpressionsChange, 'emit');
         fix.detectChanges();
@@ -1516,7 +1517,7 @@ describe('IgxGrid - GroupBy #grid', () => {
             expect(GridSelectionFunctions.verifyGroupByRowCheckboxState(grRow, true, false));
         }));
 
-    it('the group row selector state should be indeterminated if some of the records in the group but not all are selected',
+    it('the group row selector state should be undetermined if some of the records in the group but not all are selected',
         fakeAsync(() => {
             const fix = TestBed.createComponent(DefaultGridComponent);
             const grid = fix.componentInstance.instance;
@@ -2088,6 +2089,33 @@ describe('IgxGrid - GroupBy #grid', () => {
         expect(fix.componentInstance.onGroupByRowClick).toHaveBeenCalledWith(fix.componentInstance.groupByRowClick, contextUnselect);
     }));
 
+    // GroupBy Row Formatting
+    it('should properly apply formatters, both custom and default ones for the default row value template', fakeAsync(() => {
+        const fix = TestBed.createComponent(GroupableGridComponent);
+        const grid = fix.componentInstance.instance;
+        tick();
+        fix.detectChanges();
+        grid.groupBy({
+            fieldName: 'Downloads', dir: SortingDirection.Desc, ignoreCase: false
+        });
+        tick();
+        fix.detectChanges();
+        let cellText = grid.groupsRowList.first.nativeElement.querySelector(".igx-group-label__text").innerText;
+        expect(cellText).toEqual(formatNumber(1000, grid.locale));
+        // apply custom formatter
+        grid.getColumnByName('Downloads').formatter = (value, _row) => `\$${value}`;
+        grid.groupingExpressions = [];
+        tick();
+        fix.detectChanges();
+        grid.groupBy({
+            fieldName: 'Downloads', dir: SortingDirection.Desc, ignoreCase: false
+        });
+        tick();
+        fix.detectChanges();
+        cellText = grid.groupsRowList.first.nativeElement.querySelector(".igx-group-label__text").innerText;
+        expect(cellText).toEqual('$1000');
+    }));
+
     // GroupBy + Resizing
     it('should retain same size for group row after a column is resized.', fakeAsync(() => {
         const fix = TestBed.createComponent(DefaultGridComponent);
@@ -3819,7 +3847,7 @@ export class CustomTemplateGridComponent extends DataParent {
     public width = '800px';
     public height = null;
 
-    @ViewChild('template', {read: TemplateRef })
+    @ViewChild('template', { read: TemplateRef })
     public customGroupBy: TemplateRef<any>;
 }
 

projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts

@@ -48,18 +48,19 @@
                 (groupRow.expression ? groupRow.expression.fieldName : '') }}:
             </span>
 
-            <ng-container *ngIf="dataType === 'boolean' || dataType === 'string'; else default">
-                <span class="igx-group-label__text">{{ groupRow.value }}</span>
-            </ng-container>
-            <ng-template #default>
-                <ng-container *ngIf="dataType === 'number'">
-                    <span class="igx-group-label__text">{{ groupRow.value | number }}</span>
-                </ng-container>
-                <ng-container *ngIf="dataType === 'date' || dataType === 'dateTime' || dataType === 'time'">
-                    <span class="igx-group-label__text">{{ groupRow.value |
-                        date:groupRow.column.pipeArgs.format:groupRow.column.pipeArgs.timezone:grid.locale }}</span>
-                </ng-container>
-            </ng-template>
+            <span class="igx-group-label__text">{{
+                formatter
+                    ? (groupRow.value | columnFormatter:formatter:groupRow.records[0]:null)
+                    : dataType === "number"
+                    ? (groupRow.value | number:groupRow.column.pipeArgs.digitsInfo:grid.locale)
+                    : (dataType === 'date' || dataType === 'time' || dataType === 'dateTime')
+                    ? (groupRow.value | date:groupRow.column.pipeArgs.format:groupRow.column.pipeArgs.timezone:grid.locale)
+                    : dataType === 'currency'
+                    ? (groupRow.value | currency:currencyCode:groupRow.column.pipeArgs.display:groupRow.column.pipeArgs.digitsInfo:grid.locale)
+                    : dataType === 'percent'
+                    ? (groupRow.value | percent:groupRow.column.pipeArgs.digitsInfo:grid.locale)
+                    : groupRow.value
+            }}</span>
 
             <igx-badge [value]="groupRow.records ? groupRow.records.length : 0" class='igx-group-label__count-badge'>
             </igx-badge>

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

@@ -21,6 +21,7 @@ import { Subject } from 'rxjs';
 import { IgxGridRowComponent } from './grid-row.component';
 import { GridSelectionMode } from '../common/enums';
 import { ISelectionNode } from '../common/types';
+import { getLocaleCurrencyCode } from '@angular/common';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -119,6 +120,12 @@ export class IgxGridGroupByRowComponent implements OnDestroy {
         return this.isActive();
     }
 
+    /** @hidden @internal */
+    public get currencyCode(): string {
+        return this.groupRow.column.pipeArgs.currencyCode ?
+            this.groupRow.column.pipeArgs.currencyCode : getLocaleCurrencyCode(this.grid.locale);
+    }
+
     constructor(
         @Inject(IGX_GRID_BASE) public grid: GridType,
         public gridSelection: IgxGridSelectionService,
@@ -249,13 +256,21 @@ export class IgxGridGroupByRowComponent implements OnDestroy {
     }
 
     /**
-     * @hidden
-     */
+     * @hidden @internal
+    */
     public get dataType(): any {
         const column = this.groupRow.column;
         return (column && column.dataType) || GridColumnDataType.String;
     }
 
+    /**
+     * @hidden @internal
+     */
+    public get formatter(): any {
+        const column = this.groupRow.column;
+        return (column && column.formatter) || null;
+    }
+
     /**
      * @hidden @internal
      */

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

@@ -369,11 +369,17 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     public verticalRowDimScrollContainers: QueryList<IgxGridForOfDirective<any>>;
 
     /**
-     * @hidden @interal
+     * @hidden @internal
      */
     @Input()
     public addRowEmptyTemplate: TemplateRef<any>;
 
+    /**
+     * @hidden @internal
+     */
+    @Input()
+    public autoGenerateExclude: string[] = [];
+
     /**
      * @hidden @internal
      */