From 43949224faa085803fab50443d04f92c4e828a08 Mon Sep 17 00:00:00 2001
From: VDyulgerov <volen1999@gmail.com>
Date: Fri, 17 Sep 2021 17:52:40 +0300
Subject: [PATCH 1/7] fix(grid): use formattter function for boolean columns
 #8978

---
 .../src/lib/data-operations/data-util.spec.ts       |  6 +++---
 .../src/lib/grids/cell.component.html               |  4 ++--
 .../src/lib/grids/grid/column.spec.ts               | 13 +++++++++----
 .../src/lib/test-utils/grid-samples.spec.ts         |  4 ++++
 .../src/lib/test-utils/sample-test-data.spec.ts     |  6 +++---
 .../src/lib/test-utils/template-strings.spec.ts     |  1 +
 6 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/data-operations/data-util.spec.ts b/projects/igniteui-angular/src/lib/data-operations/data-util.spec.ts
index 27eb54186e2..4b1468c337b 100644
--- a/projects/igniteui-angular/src/lib/data-operations/data-util.spec.ts
+++ b/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, IsDev: true, Name: 'Peter' };
+            const addRow5 = { ID: 5, IsDev: true, Name: 'Mimi' };
+            const addRow6 = { ID: 6, IsDev: false, Name: 'Pedro' };
             const transactions: Transaction[] = [
                 { id: addRow4.ID, newValue: addRow4, type: TransactionType.ADD },
                 { id: addRow5.ID, newValue: addRow5, type: TransactionType.ADD },
diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html
index b195b27179f..e3a2a7ef324 100644
--- a/projects/igniteui-angular/src/lib/grids/cell.component.html
+++ b/projects/igniteui-angular/src/lib/grids/cell.component.html
@@ -8,7 +8,7 @@
     >
 </ng-template>
 <ng-template #defaultCell>
-    <div *ngIf="column.dataType !== 'boolean'"
+    <div
         igxTextHighlight
         class="igx-grid__td-text"
         style="pointer-events: none;"
@@ -46,7 +46,7 @@
                 : 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
     >
diff --git a/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts
index 9dc2487663d..d4a5ec20bcd 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts
+++ b/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, 'IsDev');
+            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('IsDev');
         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('IsDev');
+        expect(headers[1].nativeElement.textContent).toMatch('Name');
     });
 
     it('should support adding and removing columns through a declared iterable', fakeAsync(/** columnList.changes rAF */() => {
diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
index 21ad2f655e8..095fec0b1d9 100644
--- a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
+++ b/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 ? 'true' : 'false';
+    }
 }
 
 @Component({
diff --git a/projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts b/projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts
index b5d096f0cc2..60142c3b5fc 100644
--- a/projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts
+++ b/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, IsDev: true, Name: 'Johny' },
+        { ID: 2, IsDev: true, Name: 'Sally' },
+        { ID: 3, IsDev: false, Name: 'Tim' },
     ]);
 
     /* Data fields: FirstName: string, LastName: string, age:number; 3 items. */
diff --git a/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts b/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts
index dbf14b53ee5..84462f03090 100644
--- a/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts
+++ b/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="IsDev" [dataType]="'boolean'"></igx-column>
         <igx-column field="Name"></igx-column>
     `;
 

From b807529a735470b4c6a5fc5ef49f734ed14fe2cc Mon Sep 17 00:00:00 2001
From: VDyulgerov <volen1999@gmail.com>
Date: Mon, 20 Sep 2021 10:17:56 +0300
Subject: [PATCH 2/7] test(grid): Change variable name #8978

---
 .../src/lib/data-operations/data-util.spec.ts               | 6 +++---
 projects/igniteui-angular/src/lib/grids/grid/column.spec.ts | 6 +++---
 .../src/lib/test-utils/sample-test-data.spec.ts             | 6 +++---
 .../src/lib/test-utils/template-strings.spec.ts             | 2 +-
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/data-operations/data-util.spec.ts b/projects/igniteui-angular/src/lib/data-operations/data-util.spec.ts
index 4b1468c337b..e0a1603c3e5 100644
--- a/projects/igniteui-angular/src/lib/data-operations/data-util.spec.ts
+++ b/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, IsDev: true, Name: 'Peter' };
-            const addRow5 = { ID: 5, IsDev: true, Name: 'Mimi' };
-            const addRow6 = { ID: 6, IsDev: false, 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 },
diff --git a/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts
index d4a5ec20bcd..e4f825a1602 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts
@@ -134,7 +134,7 @@ describe('IgxGrid - Column properties #grid', () => {
             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, 'IsDev');
+            const cellBool = grid.gridAPI.get_cell_by_index(i, 'IsEmployed');
             expect(cellBool.nativeElement.textContent).toMatch(boolFormatter(cellBool.value));
         }
     });
@@ -172,11 +172,11 @@ describe('IgxGrid - Column properties #grid', () => {
         grid.moveColumn(grid.columnList.first, grid.columnList.last);
         fix.detectChanges();
 
-        expect(grid.columnList.first.field).toMatch('IsDev');
+        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('IsDev');
+        expect(headers[0].nativeElement.textContent).toMatch('IsEmployed');
         expect(headers[1].nativeElement.textContent).toMatch('Name');
     });
 
diff --git a/projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts b/projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts
index 60142c3b5fc..e716a120db8 100644
--- a/projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts
+++ b/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, IsDev: true, Name: 'Johny' },
-        { ID: 2, IsDev: true, Name: 'Sally' },
-        { ID: 3, IsDev: false, 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. */
diff --git a/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts b/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts
index 84462f03090..0af0edf9b6c 100644
--- a/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts
@@ -217,7 +217,7 @@ export class ColumnDefinitions {
 
     public static idNameFormatter = `
         <igx-column field="ID" [formatter]="multiplier"></igx-column>
-        <igx-column field="IsDev" [dataType]="'boolean'"></igx-column>
+        <igx-column field="IsEmployed" [dataType]="'boolean'"></igx-column>
         <igx-column field="Name"></igx-column>
     `;
 

From 668cfabaeea2b7dba05c3ed6ee21e4c8c661433a Mon Sep 17 00:00:00 2001
From: VDyulgerov <volen1999@gmail.com>
Date: Tue, 21 Sep 2021 14:02:45 +0300
Subject: [PATCH 3/7] fix(grid): remove formating text when formatter is
 missing on boolean column

---
 .../igniteui-angular/src/lib/grids/cell.component.html     | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html
index e3a2a7ef324..592e726ec9b 100644
--- a/projects/igniteui-angular/src/lib/grids/cell.component.html
+++ b/projects/igniteui-angular/src/lib/grids/cell.component.html
@@ -26,6 +26,8 @@
                 ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)
                 : column.dataType === 'percent'
                 ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)
+                : column.dataType === 'boolean' && !this.formatter
+                ? ''
                 : value
         "
         [row]="rowData"
@@ -43,6 +45,8 @@
                 ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)
                 : column.dataType === 'percent'
                 ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)
+                : column.dataType === 'boolean' && !this.formatter
+                ? ''
                 : value
         }}</div>
     <igx-icon
@@ -60,7 +64,8 @@
         (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"
+        (value | percent:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'boolean' && !this.formatter ?
+         '' : value"
     [row]="rowData"
     [column]="this.column.field"
     [containerClass]="'igx-grid__td-text'"

From 3f192b3bc825034fa87cbe49b8dbac36f7785dac Mon Sep 17 00:00:00 2001
From: VDyulgerov <volen1999@gmail.com>
Date: Thu, 23 Sep 2021 11:45:12 +0300
Subject: [PATCH 4/7] fix(grid): when formatter is missing display icon only
 #8978

---
 .../grids/grid/expandable-cell.component.html  | 18 +++++++++++++++---
 .../grids/tree-grid/tree-cell.component.html   |  7 +++++--
 .../src/lib/test-utils/grid-samples.spec.ts    |  2 +-
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html
index 50f375aa31e..128ae390646 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html
+++ b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html
@@ -13,7 +13,11 @@
             ? (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)
+            : column.dataType === 'boolean' && !this.formatter
+            ? ''
+            : value"
         [row]="rowData"
         [column]="this.column.field"
         [containerClass]="'igx-grid__td-text'"
@@ -21,7 +25,14 @@
             ? (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) : column.dataType === 'boolean' && !this.formatter
+            ? '' : 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"
@@ -32,7 +43,8 @@
         (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"
+        (value | percent:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'boolean' && !this.formatter ? '' :
+        value"
     [row]="rowData"
     [column]="this.column.field"
     [containerClass]="'igx-grid__td-text'"
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html
index c13e147ddc5..88b79b58683 100644
--- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html
+++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html
@@ -43,10 +43,12 @@
                 ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)
                 : column.dataType === 'percent'
                 ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)
+                : column.dataType === 'boolean' && !this.formatter
+                ? ''
                 : 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
     >
@@ -60,7 +62,8 @@
         (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"
+        (value | percent:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'boolean' && !this.formatter ?
+        '' : value"
     [row]="rowData"
     [column]="this.column.field"
     [containerClass]="'igx-grid__td-text'"
diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
index 095fec0b1d9..8bc084c71e5 100644
--- a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
@@ -164,7 +164,7 @@ export class ColumnCellFormatterComponent extends BasicGridComponent {
     }
 
     public boolFormatter(value: boolean): string {
-        return value ? 'true' : 'false';
+        return value ? 'check' : 'close';
     }
 }
 

From 2b4497d46fa8e034582449b1cc65a77a7d588f80 Mon Sep 17 00:00:00 2001
From: VDyulgerov <volen1999@gmail.com>
Date: Fri, 24 Sep 2021 09:27:02 +0300
Subject: [PATCH 5/7] fix(grid): fix "This condition will always return 'false'
 [...]" #8978

---
 .../igniteui-angular/src/lib/grids/cell.component.html    | 6 +++---
 .../src/lib/grids/grid/expandable-cell.component.html     | 8 ++++----
 .../src/lib/grids/tree-grid/tree-cell.component.html      | 6 +++---
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html
index 592e726ec9b..9b3d489a3cc 100644
--- a/projects/igniteui-angular/src/lib/grids/cell.component.html
+++ b/projects/igniteui-angular/src/lib/grids/cell.component.html
@@ -26,7 +26,7 @@
                 ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)
                 : column.dataType === 'percent'
                 ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)
-                : column.dataType === 'boolean' && !this.formatter
+                : column.dataType === 'boolean'
                 ? ''
                 : value
         "
@@ -45,7 +45,7 @@
                 ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)
                 : column.dataType === 'percent'
                 ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)
-                : column.dataType === 'boolean' && !this.formatter
+                : column.dataType === 'boolean'
                 ? ''
                 : value
         }}</div>
@@ -64,7 +64,7 @@
         (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) : column.dataType === 'boolean' && !this.formatter ?
+        (value | percent:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'boolean' ?
          '' : value"
     [row]="rowData"
     [column]="this.column.field"
diff --git a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html
index 128ae390646..0de29885214 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html
+++ b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html
@@ -15,7 +15,7 @@
             ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)
             : column.dataType === 'percent'
             ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)
-            : column.dataType === 'boolean' && !this.formatter
+            : column.dataType === 'boolean'
             ? ''
             : value"
         [row]="rowData"
@@ -25,7 +25,7 @@
             ? (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) : column.dataType === 'boolean' && !this.formatter
+            ? (value | percent:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'boolean'
             ? '' : value}}</div>
 
     <igx-icon
@@ -43,8 +43,8 @@
         (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) : column.dataType === 'boolean' && !this.formatter ? '' :
-        value"
+        (value | percent:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'boolean' ?
+         '' : value"
     [row]="rowData"
     [column]="this.column.field"
     [containerClass]="'igx-grid__td-text'"
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html
index 88b79b58683..ee17cfdb9a0 100644
--- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html
+++ b/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
         igxTextHighlight
         class="igx-grid__td-text"
         style="pointer-events: none;"
@@ -43,7 +43,7 @@
                 ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)
                 : column.dataType === 'percent'
                 ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)
-                : column.dataType === 'boolean' && !this.formatter
+                : column.dataType === 'boolean'
                 ? ''
                 : value
         }}</div>
@@ -62,7 +62,7 @@
         (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) : column.dataType === 'boolean' && !this.formatter ?
+        (value | percent:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'boolean' ?
         '' : value"
     [row]="rowData"
     [column]="this.column.field"

From 0f98b9d4b0edef345897171cdd58208eba36dfb2 Mon Sep 17 00:00:00 2001
From: VDyulgerov <volen1999@gmail.com>
Date: Mon, 27 Sep 2021 11:51:06 +0300
Subject: [PATCH 6/7] fix(grid): fix unnecessary empty div #8978

---
 .../src/lib/grids/cell.component.html              | 12 ++++--------
 .../lib/grids/grid/expandable-cell.component.html  | 14 ++++++--------
 .../lib/grids/tree-grid/tree-cell.component.html   | 11 +++++------
 3 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html
index 9b3d489a3cc..c87188c2fd2 100644
--- a/projects/igniteui-angular/src/lib/grids/cell.component.html
+++ b/projects/igniteui-angular/src/lib/grids/cell.component.html
@@ -8,7 +8,7 @@
     >
 </ng-template>
 <ng-template #defaultCell>
-    <div
+    <div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
         igxTextHighlight
         class="igx-grid__td-text"
         style="pointer-events: none;"
@@ -26,8 +26,6 @@
                 ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)
                 : column.dataType === 'percent'
                 ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)
-                : column.dataType === 'boolean'
-                ? ''
                 : value
         "
         [row]="rowData"
@@ -45,8 +43,6 @@
                 ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)
                 : column.dataType === 'percent'
                 ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)
-                : column.dataType === 'boolean'
-                ? ''
                 : value
         }}</div>
     <igx-icon
@@ -56,7 +52,8 @@
     >
 </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"
@@ -64,8 +61,7 @@
         (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) : column.dataType === 'boolean' ?
-         '' : value"
+        (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value"
     [row]="rowData"
     [column]="this.column.field"
     [containerClass]="'igx-grid__td-text'"
diff --git a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html
index 0de29885214..66afb57f36b 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html
+++ b/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"
@@ -15,8 +16,6 @@
             ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)
             : column.dataType === 'percent'
             ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)
-            : column.dataType === 'boolean'
-            ? ''
             : value"
         [row]="rowData"
         [column]="this.column.field"
@@ -25,8 +24,7 @@
             ? (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) : column.dataType === 'boolean'
-            ? '' : value}}</div>
+            ? (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value}}</div>
 
     <igx-icon
         *ngIf="column.dataType === 'boolean' && !this.formatter"
@@ -35,7 +33,8 @@
     >
 </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"
@@ -43,8 +42,7 @@
         (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) : column.dataType === 'boolean' ?
-         '' : value"
+        (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value"
     [row]="rowData"
     [column]="this.column.field"
     [containerClass]="'igx-grid__td-text'"
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html
index ee17cfdb9a0..79c27811e43 100644
--- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html
+++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html
@@ -8,7 +8,7 @@
     >
 </ng-template>
 <ng-template #defaultCell>
-    <div
+    <div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
         igxTextHighlight
         class="igx-grid__td-text"
         style="pointer-events: none;"
@@ -43,8 +43,6 @@
                 ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)
                 : column.dataType === 'percent'
                 ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)
-                : column.dataType === 'boolean'
-                ? ''
                 : value
         }}</div>
     <igx-icon
@@ -54,7 +52,9 @@
     >
 </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"
@@ -62,8 +62,7 @@
         (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) : column.dataType === 'boolean' ?
-        '' : value"
+        (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value"
     [row]="rowData"
     [column]="this.column.field"
     [containerClass]="'igx-grid__td-text'"

From cf51e71124ee974715359d7b613d6d51f99aa751 Mon Sep 17 00:00:00 2001
From: Hristo Anastasov <hanastasov@infragistics.com>
Date: Tue, 28 Sep 2021 09:16:00 +0300
Subject: [PATCH 7/7] chore(*): fix formatting sample

---
 src/app/grid-formatting/grid-formatting.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/grid-formatting/grid-formatting.component.html b/src/app/grid-formatting/grid-formatting.component.html
index 57bfedd9bd8..210cff4c8a2 100644
--- a/src/app/grid-formatting/grid-formatting.component.html
+++ b/src/app/grid-formatting/grid-formatting.component.html
@@ -23,7 +23,7 @@ <h3>Grid with local data</h3>
     </igx-column>
     <igx-column width="200px" field="OrderDate" header="Unbound column" [filterable]="true" [hasSummary]="true" [sortable]="true">
         <ng-template igxCell let-cell="cell" let-val>
-            {{ cell.rowData.UnitsInStock }}
+            {{ getVal(cell) }}
         </ng-template>
     </igx-column>
     <igx-column field="ReorderLevel" width="200px" [sortable]="true" [filterable]="true" [dataType]="'number'" [hasSummary]="false">