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