fix(grid): when formatter is missing display icon only #8978

Author: Volen99

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

@@ -13,15 +13,26 @@
             ? (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'"
         [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) : 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'"

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'"

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';
     }
 }