fix(grid): use formattter function for boolean columns #8978

Author: Volen99

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 },

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
     >

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 */() => {

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({

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. */

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>
     `;