diff --git a/CHANGELOG.md b/CHANGELOG.md
index 35763c23569..ec4b3193c8b 100644
--- a/CHANGELOG.md
+++ b/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`
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss
index cbb27f1f05d..e17a04889f0 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss
+++ b/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;
}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
index 20b54a0437b..6f93c9e8a69 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
+++ b/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;
diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html
index 04696681d96..e26a357456b 100644
--- a/projects/igniteui-angular/src/lib/grids/cell.component.html
+++ b/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 }}
+ [metadata]="searchMetadata">{{ formatter ? (value | columnFormatter:formatter) :
+ column.dataType === 'number' ?
+ (value | igxdecimal:grid.locale) :
+ column.dataType === 'date' ?
+ (value | igxdate: grid.locale) :
+ column.dataType === 'boolean' ? "" :
+ value
+ }}
+ {{value ? 'check' : 'close'}}
diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts
index 086b7abd41c..1e6520b02c1 100644
--- a/projects/igniteui-angular/src/lib/grids/cell.component.ts
+++ b/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
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html
index 2f2521dc226..f4047c74cee 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html
+++ b/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)"
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html
index ecc67939252..e2e434e8126 100644
--- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html
+++ b/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)"
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
index ed0a7829d93..c54b3ce5841 100644
--- 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
@@ -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 }}
+ [metadata]="searchMetadata">{{ formatter ? (value | columnFormatter:formatter) :
+ column.dataType === 'number' ?
+ (value | igxdecimal:grid.locale) :
+ column.dataType === 'date' ?
+ (value | igxdate: grid.locale) :
+ column.dataType === 'boolean' ? "" :
+ value
+ }}
+ {{value ? 'check' : 'close'}}
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html
index cb06a53dc17..1dab568816e 100644
--- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html
+++ b/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)"