fix(grid): fix unnecessary empty div #8978

IgniteUI · Sep 27, 2021 · 2e6abdc · 2e6abdc
1 parent 66876e7
commit 2e6abdc
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 22 deletions.
diff --git 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,16 +52,16 @@
     >
 </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"
     [value]="formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?
         (value | number:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'date' ?
         (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
@@ -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"
             ? (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,16 +33,16 @@
     >
 </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"
     [value]="formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?
         (value | number:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'date' ?
         (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
@@ -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,16 +52,17 @@
     >
 </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"
     [value]="formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?
         (value | number:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'date' ?
         (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'"