Merge branch 'master' into pivot-grid-master

Author: ChronosSF

CHANGELOG.md

@@ -5,18 +5,29 @@ All notable changes for each version of this project will be documented in this
 ## 12.2.0
 
 ### New Features
+- `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid`
+    - Added capability to restore the state of multi column headers with `IgxGridStateDirective`.
+    - Introduced new 'rowStyles' and 'rowClasses' grid properties which allows to define a custom styling on each grid row
+    - Introduced two new *cancellable* outputs related to CRUD - `rowDelete` and `rowAdd`. Both use an `IGridEditEventArgs` object as an event argument.
+        ```html
+        <igx-grid #grid [data]="localData" (rowAdd)="rowAdd($event)" (rowDelete)="rowDelete($event)" [autoGenerate]="true"></igx-grid>
+        ```
 - `igxTreeGrid`
     - Added `TreeGridMatchingRecordsOnlyFilteringStrategy`, which allows you to display only the records matching particular filtering condition without any trace for their parents.
-
-## 12.1.6
+- `IgxSnackbarComponent`
+    - Introduced new 'positionSettings' input which allows to define a custom animation and position.
+- `IgxToastComponent`
+    - Introduced new 'positionSettings' input which allows to define a custom animation and position.
 
 ### General
 - `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid`
     - 'oddRowCSS' and 'evenRowCSS' properties has been deprecated
 
+## 12.1.6
+
 ### New Features
 - `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid`
-    - Added two public methods that spawn the add row UI for an arbitrary record in the current data view. One that accepts a rowID to use as the row the UI spawns under and the other accepting an index that has a distinct implementation for `IgxTreeGrid`. Please, refer to the official documentation for more information:[Grid Row Adding](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/row-adding) and [Tree Grid Row Adding](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/row-adding).
+    - Added two public methods that spawn the add row UI for an arbitrary record in the current data view. One that accepts a rowID to use as the row the UI spawns under and the other accepting an index that has a distinct implementation for `IgxTreeGrid`. Please, refer to the official documentation for more information: [Grid Row Adding](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/row-adding) and [Tree Grid Row Adding](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/row-adding).
 
         _Note:_ That the new record is still added at the end of the data view, after the end-user submits it.
         ```typescript
@@ -28,16 +39,6 @@ All notable changes for each version of this project will be documented in this
         this.treeGrid.beginAddRowByIndex(10, true);     // spawns the add row UI to add a child for the row at index 10
         this.treeGrid.beginAddRowByIndex(null);         // spawns the add row UI as the first record
         ```
-    - Added capability to restore the state of multi column headers with `IgxGridStateDirective`.
-    - Introduced new 'rowStyles' and 'rowClasses' grid properties which allows to define a custom styling on each grid row
-    - Introduced two new *cancellable* outputs related to CRUD - `rowDelete` and `rowAdd`. Both use an `IGridEditEventArgs` object as an event argument.
-        ```html
-        <igx-grid #grid [data]="localData" (rowAdd)="rowAdd($event)" (rowDelete)="rowDelete($event)" [autoGenerate]="true"></igx-grid>
-        ```
-- `IgxSnackbarComponent`
-    - Introduced new 'positionSettings' input which allows to define a custom animation and position.
-- `IgxToastComponent`
-    - Introduced new 'positionSettings' input which allows to define a custom animation and position.
 
 ## 12.1.3
 

ROADMAP.md

@@ -8,12 +8,8 @@
 2. **[DONE]** Grid row styles and classes [#9969](https://github.com/IgniteUI/igniteui-angular/issues/9969)
 3. **[DONE]** Freezing Columns/Rows on Export to Excel (Angular) [#9863](https://github.com/IgniteUI/igniteui-angular/issues/9863)
 4. **[DONE]** Persistent State directive for column group [#8516](https://github.com/IgniteUI/igniteui-angular/issues/8516)
-5. IgxTreeGrid: display only filtered records [#9923](https://github.com/IgniteUI/igniteui-angular/issues/9923)
-6. IgxCombo: being able to set groups sorting order [#10125](https://github.com/IgniteUI/igniteui-angular/issues/10125)
-7. IgxCsvExporterService: Support multi-column headers export [#10078](https://github.com/IgniteUI/igniteui-angular/issues/10078)
-8. **[DONE]** Snackbar support for animation customization [#10126](https://github.com/IgniteUI/igniteui-angular/issues/10126)
-9. IgxLinearProgressBar: animate initial progress [#10068](https://github.com/IgniteUI/igniteui-angular/issues/10068)
-10. Getting only one sort and one filter event after changing the state of grid using setState function [#8064](https://github.com/IgniteUI/igniteui-angular/issues/8064)
+5. **[DONE]** IgxTreeGrid: display only filtered records [#9923](https://github.com/IgniteUI/igniteui-angular/issues/9923)
+6. **[DONE]** Snackbar support for animation customization [#10126](https://github.com/IgniteUI/igniteui-angular/issues/10126)
 
 ## Going down the road
 
@@ -24,6 +20,9 @@
 5. Themes: Split themes and aid with Grid refactoring [#9556](https://github.com/IgniteUI/igniteui-angular/issues/9556)
 6. Stepper component [#8667](https://github.com/IgniteUI/igniteui-angular/issues/8667)
 7. Make IgxDropDownBaseToken public [#10103](https://github.com/IgniteUI/igniteui-angular/issues/10103)
+8. IgxLinearProgressBar: animate initial progress [#10068](https://github.com/IgniteUI/igniteui-angular/issues/10068)
+9. IgxCombo: being able to set groups sorting order [#10125](https://github.com/IgniteUI/igniteui-angular/issues/10125)
+10. Getting only one sort and one filter event after changing the state of grid using setState function [#8064](https://github.com/IgniteUI/igniteui-angular/issues/8064)
 
 # Previous Milestone
 

projects/igniteui-angular/src/lib/data-operations/data-util.spec.ts

@@ -487,9 +487,9 @@ const testMerging = () => {
     describe('Test merging', () => {
         it('Should merge add transactions correctly', () => {
             const data = SampleTestData.personIDNameData();
-            const addRow4 = { ID: 4, Name: 'Peter' };
-            const addRow5 = { ID: 5, Name: 'Mimi' };
-            const addRow6 = { ID: 6, Name: 'Pedro' };
+            const addRow4 = { ID: 4, IsEmployed: true, Name: 'Peter' };
+            const addRow5 = { ID: 5, IsEmployed: true, Name: 'Mimi' };
+            const addRow6 = { ID: 6, IsEmployed: false, Name: 'Pedro' };
             const transactions: Transaction[] = [
                 { id: addRow4.ID, newValue: addRow4, type: TransactionType.ADD },
                 { id: addRow5.ID, newValue: addRow5, type: TransactionType.ADD },

projects/igniteui-angular/src/lib/grids/cell.component.html

@@ -8,7 +8,7 @@
     >
 </ng-template>
 <ng-template #defaultCell>
-    <div *ngIf="column.dataType !== 'boolean'"
+    <div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
         igxTextHighlight
         class="igx-grid__td-text"
         style="pointer-events: none;"
@@ -46,13 +46,14 @@
                 : value
         }}</div>
     <igx-icon
-        *ngIf="column.dataType === 'boolean'"
+        *ngIf="column.dataType === 'boolean' && !this.formatter"
         [ngClass]="{ 'igx-icon--success': value, 'igx-icon--error': !value }"
         >{{ value ? "check" : "close" }}</igx-icon
     >
 </ng-template>
 <ng-template #addRowCell let-cell="cell">
-    <div igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
+    <div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
+        igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
     [cssClass]="highlightClass"
     [activeCssClass]="activeHighlightClass"
     [groupName]="gridID"

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

@@ -126,11 +126,16 @@ describe('IgxGrid - Column properties #grid', () => {
         const grid = fix.componentInstance.grid;
         const formatter = fix.componentInstance.multiplier;
 
+        const boolFormatter = fix.componentInstance.boolFormatter;
+
         expect(grid.columnList.first.formatter).toBeDefined();
 
         for (let i = 0; i < 3; i++) {
             const cell = grid.gridAPI.get_cell_by_index(i, 'ID');
             expect(cell.nativeElement.textContent).toMatch(formatter(cell.value));
+
+            const cellBool = grid.gridAPI.get_cell_by_index(i, 'IsEmployed');
+            expect(cellBool.nativeElement.textContent).toMatch(boolFormatter(cellBool.value));
         }
     });
 
@@ -161,18 +166,18 @@ describe('IgxGrid - Column properties #grid', () => {
 
         headers = fix.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
         expect(headers[0].nativeElement.textContent).toMatch('ID');
-        expect(headers[1].nativeElement.textContent).toMatch('Name');
+        expect(headers[2].nativeElement.textContent).toMatch('Name');
 
         // Swap columns
         grid.moveColumn(grid.columnList.first, grid.columnList.last);
         fix.detectChanges();
 
-        expect(grid.columnList.first.field).toMatch('Name');
+        expect(grid.columnList.first.field).toMatch('IsEmployed');
         expect(grid.columnList.last.field).toMatch('ID');
 
         headers = fix.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
-        expect(headers[0].nativeElement.textContent).toMatch('Name');
-        expect(headers[1].nativeElement.textContent).toMatch('ID');
+        expect(headers[0].nativeElement.textContent).toMatch('IsEmployed');
+        expect(headers[1].nativeElement.textContent).toMatch('Name');
     });
 
     it('should support adding and removing columns through a declared iterable', fakeAsync(/** columnList.changes rAF */() => {

projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html

@@ -2,7 +2,8 @@
     <igx-chip *ngIf="displayPinnedChip" class="igx-grid__td--pinned-chip" [disabled]="true" [displayDensity]="'compact'">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>
 </ng-template>
 <ng-template #defaultCell>
-    <div igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
+    <div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
+        igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
         [cssClass]="highlightClass"
         [activeCssClass]="activeHighlightClass"
         [groupName]="gridID"
@@ -13,18 +14,27 @@
             ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)
             : column.dataType === 'currency'
             ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)
-            : column.dataType === 'percent' ? (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value"
+            : column.dataType === 'percent'
+            ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)
+            : value"
         [row]="rowData"
         [column]="this.column.field"
         [containerClass]="'igx-grid__td-text'"
         [metadata]="searchMetadata">{{ formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === "number"
             ? (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')
             ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'
             ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent'
-            ? (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value }}</div>
+            ? (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value}}</div>
+
+    <igx-icon
+        *ngIf="column.dataType === 'boolean' && !this.formatter"
+        [ngClass]="{ 'igx-icon--success': value, 'igx-icon--error': !value }"
+    >{{ value ? "check" : "close" }}</igx-icon
+    >
 </ng-template>
 <ng-template #addRowCell let-cell="cell">
-    <div igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
+    <div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
+        igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
     [cssClass]="highlightClass"
     [activeCssClass]="activeHighlightClass"
     [groupName]="gridID"

projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html

@@ -8,7 +8,7 @@
     >
 </ng-template>
 <ng-template #defaultCell>
-    <div *ngIf="column.dataType !== 'boolean'"
+    <div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
         igxTextHighlight
         class="igx-grid__td-text"
         style="pointer-events: none;"
@@ -46,13 +46,15 @@
                 : value
         }}</div>
     <igx-icon
-        *ngIf="column.dataType === 'boolean'"
+        *ngIf="column.dataType === 'boolean' && !this.formatter"
         [ngClass]="{ 'igx-icon--success': value, 'igx-icon--error': !value }"
         >{{ value ? "check" : "close" }}</igx-icon
     >
 </ng-template>
 <ng-template #addRowCell let-cell="cell">
-    <div igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
+    <div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
+    igxTextHighlight class="igx-grid__td-text"
+    style="pointer-events: none"
     [cssClass]="highlightClass"
     [activeCssClass]="activeHighlightClass"
     [groupName]="gridID"

projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

@@ -162,6 +162,10 @@ export class ColumnCellFormatterComponent extends BasicGridComponent {
     public containsY(_: number, data: { ID: number; Name: string }) {
         return data.Name.includes('y') ? 'true' : 'false';
     }
+
+    public boolFormatter(value: boolean): string {
+        return value ? 'check' : 'close';
+    }
 }
 
 @Component({

projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts

@@ -141,9 +141,9 @@ export class SampleTestData {
 
     /* Data fields: ID: number, Name: string; 3 items. */
     public static personIDNameData = () => ([
-        { ID: 1, Name: 'Johny' },
-        { ID: 2, Name: 'Sally' },
-        { ID: 3, Name: 'Tim' }
+        { ID: 1, IsEmployed: true, Name: 'Johny' },
+        { ID: 2, IsEmployed: true, Name: 'Sally' },
+        { ID: 3, IsEmployed: false, Name: 'Tim' },
     ]);
 
     /* Data fields: FirstName: string, LastName: string, age:number; 3 items. */

projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts

@@ -217,6 +217,7 @@ export class ColumnDefinitions {
 
     public static idNameFormatter = `
         <igx-column field="ID" [formatter]="multiplier"></igx-column>
+        <igx-column field="IsEmployed" [dataType]="'boolean'"></igx-column>
         <igx-column field="Name"></igx-column>
     `;