feat(grid): expose bool default template (#7823)

* feat(grid): expose bool default template Closes #7224

* feat(grid-cell): exposing default template tick class

* style(grid): add styles for boolean column

* fix(grid-cell): change bool icon class

* fix(grid): move bool icon template otside the text wrapper

* fix(grid): move default template class on the host

* feat(grid): add missed underscore

* style(grid): add styles for the new template

* style(grid): move placeholder selector separately

* fix(grid): remove cell value interpolation space

* feat(grid): expose bool default template in hgrid cell

* chore(*): Changelog update

Co-authored-by: didimmova <[email protected]>
Co-authored-by: Simeon Simeonoff <[email protected]>
Co-authored-by: Zdravko Kolev <[email protected]>

Author: 4 people

CHANGELOG.md

@@ -17,6 +17,7 @@ All notable changes for each version of this project will be documented in this
     - **Breaking Changes** - The `igx-action-icon` has been renamed to `igx-navbar-action`. It should get renamed in your components via `ng update`;
 - `igxGrid`
     - Added `onScroll` event, which is emitted when the grid is scrolled vertically or horizontally.
+    - Each grid now expose a default handling for boolean column types. The column will display `check` or `close` icon, instead of true/false by default. 
 - `igxTreeGrid`
     - Removed `onDataPreLoad` event as it is specific for remote virtualization implementation, which is not supported for the `igxTreeGrid`. A more generic `onScroll` event is exposed and can be used instead.
 - `IgxTimePicker`

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

@@ -325,6 +325,14 @@
         @extend %grid-cell--cross-selected !optional;
     }
 
+    @include e(td, $m: bool) {
+        @extend %igx-grid__td--bool !optional;
+    }
+
+    @include e(td, $m: bool-true) {
+        @extend %igx-grid__td--bool-true !optional;
+    }
+
     @include e(tr, $mods: (selected, filtered)) {
         @extend %grid-row--selected--filtered !optional;
     }

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -1139,6 +1139,23 @@
         bottom: 0;
     }
 
+    %igx-grid__td--bool {
+        justify-content: center;
+
+        igx-icon {
+            height: rem(18px);
+            width: rem(18px);
+            font-size: rem(18px);
+            color: igx-color($palette, 'grays', 500);
+        }
+    }
+
+    %igx-grid__td--bool-true {
+        igx-icon {
+            color: igx-color($palette, 'grays', 700);
+        }
+    }
+
     %igx-grid__tr--edit {
         border-bottom: 1px solid --var($theme, 'edit-mode-color');
         position: relative;

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

@@ -10,7 +10,15 @@
         [row]="rowData"
         [column]="this.column.field"
         [containerClass]="'igx-grid__td-text'"
-        [metadata]="searchMetadata">{{ formatter ? (value | columnFormatter:formatter) : column.dataType === 'number' ? (value | igxdecimal:grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value }}</div>
+        [metadata]="searchMetadata">{{ formatter ? (value | columnFormatter:formatter) :
+            column.dataType === 'number' ?
+            (value | igxdecimal:grid.locale) :
+            column.dataType === 'date' ?
+            (value | igxdate: grid.locale) :
+            column.dataType === 'boolean' ? "" :
+            value
+        }}</div>
+    <igx-icon *ngIf="column.dataType === 'boolean'">{{value ? 'check' : 'close'}}</igx-icon>
 </ng-template>
 <ng-template #inlineEditor let-cell="cell">
     <ng-container *ngIf="column.dataType === 'string'">

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

@@ -287,6 +287,11 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
         return this.editMode || this.cellTemplate ? '' : this.value;
     }
 
+    @HostBinding('class.igx-grid__td--bool-true')
+    public get booleanClass() {
+        return this.column.dataType === 'boolean' && this.value;
+    }
+
     /**
      * Returns a reference to the nativeElement of the cell.
      * ```typescript

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

@@ -92,6 +92,7 @@
         [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
         [class.igx-grid__td--pinned]="col.pinned"
         [class.igx-grid__td--number]="col.dataType === 'number'"
+        [class.igx-grid__td--bool]="col.dataType === 'boolean'"
         [ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
         [ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
         [editMode]="col.editable && crudService.isInEditMode(index, col.index)"

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html

@@ -43,6 +43,7 @@
         [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger"
         [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
         [class.igx-grid__td--number]="col.dataType === 'number'"
+        [class.igx-grid__td--bool]="col.dataType === 'boolean'"
         [ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
         [ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
         [editMode]="col.editable && crudService.isInEditMode(index, col.index)"

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

@@ -10,7 +10,15 @@
         [row]="rowData"
         [column]="this.column.field"
         [containerClass]="'igx-grid__td-text'"
-        [metadata]="searchMetadata">{{ formatter ? (value | columnFormatter:formatter) : column.dataType === 'number' ? (value | igxdecimal:grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value }}</div>
+        [metadata]="searchMetadata">{{ formatter ? (value | columnFormatter:formatter) :
+            column.dataType === 'number' ?
+            (value | igxdecimal:grid.locale) :
+            column.dataType === 'date' ?
+            (value | igxdate: grid.locale) :
+            column.dataType === 'boolean' ? "" :
+            value
+        }}</div>
+    <igx-icon *ngIf="column.dataType === 'boolean'">{{value ? 'check' : 'close'}}</igx-icon>
 </ng-template>
 <ng-template #inlineEditor  let-cell="cell">
     <ng-container *ngIf="column.dataType === 'string'">

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

@@ -21,6 +21,7 @@
             [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger"
             [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
             [class.igx-grid__td--number]="col.dataType === 'number'"
+            [class.igx-grid__td--bool]="col.dataType === 'boolean'"
             [ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
             [ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
             [editMode]="col.editable && crudService.isInEditMode(index, col.index)"