Merge branch '10.0.x' into SIvanova/ExcelStyleFiltering

Author: simeonoff

CHANGELOG.md

@@ -27,6 +27,7 @@ All notable changes for each version of this project will be documented in this
 ### General
 - `igxGrid`
     - **Behavioral Change** - Group rows now display the group column's header name instead of field when one is available.
+    - 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. 
 - `igx-select`, `igx-combo`, `igx-drop-down`
     - **Behavioral Change** - The select, combo, and dropdown items now have display block and text-overflow ellipsis enabled by default. This requires styling to be handled on the application-level if there is something more than a simple text in the item.
 - `IgxTransaction` - The `onStateUpdate` now emits with information of its origin. The emitted value is of type `StateUpdateEvent`, which has two properties:

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

@@ -1136,6 +1136,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

@@ -3,10 +3,11 @@
 </ng-template>
 <ng-template #defaultCell>
     <div igxTextHighlight style="pointer-events: none" [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
-        [value]="formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value"
-        [row]="rowData" [column]="this.column.field" [containerClass]="'igx-grid__td-text'" [metadata]="searchMetadata"
-        class="igx-grid__td-text">{{ formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal:
-        grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value }}</div>
+    [value]="formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value"
+    [row]="rowData" [column]="this.column.field" [containerClass]="'igx-grid__td-text'" [metadata]="searchMetadata"
+    class="igx-grid__td-text">{{ formatter ? formatter(value) : 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

@@ -285,6 +285,11 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
         return `${this.row.gridID}_${this.rowIndex}_${ this.visibleColumnIndex}`;
     }
 
+    @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

@@ -90,6 +90,7 @@
         class="igx-grid__td igx-grid__td--fw"
         [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"
         [ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex"
         [editMode]="col.editable && crudService.isInEditMode(index, col.index)"

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

@@ -41,6 +41,7 @@
     <igx-hierarchical-grid-cell
         class="igx-grid__td igx-grid__td--fw"
         [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"
         [ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex"
         [editMode]="col.editable && crudService.isInEditMode(index, col.index)"
@@ -108,4 +109,4 @@
         [cellSelectionMode]="grid.cellSelection"
         [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)">
     </igx-hierarchical-grid-cell>
-</ng-template>
+</ng-template>

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

@@ -6,7 +6,8 @@
         [value]="formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value"
         [row]="rowData" [column]="this.column.field" [containerClass]="'igx-grid__td-text'" [metadata]="searchMetadata"
         class="igx-grid__td-text">{{ formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal:
-        grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value }}</div>
+        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

@@ -19,6 +19,7 @@
         <igx-grid-cell
             class="igx-grid__td igx-grid__td--fw"
             [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"
             [ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex"
             [editMode]="col.editable && crudService.isInEditMode(index, col.index)"
@@ -155,4 +156,4 @@
         </ng-template>
         <ng-container *ngTemplateOutlet="col.visibleIndex === 0 ? treeCellTemplate : cellTemplate"></ng-container>
     </ng-template>
-</ng-template>
+</ng-template>