Skip to content

Commit 2709c3d

Browse files
kdinevkdinev
authored
Merge pull request #10154 from IgniteUI/VDyulgerov_fix-boolean-column-master
fix(grid): use formattter function for boolean columns #8978
2 parents 3dfff73 + b181e19 commit 2709c3d

File tree

9 files changed

+44
-21
lines changed

9 files changed

+44
-21
lines changed

‎projects/igniteui-angular/src/lib/data-operations/data-util.spec.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -487,9 +487,9 @@ const testMerging = () => {
487487
describe('Test merging', () => {
488488
it('Should merge add transactions correctly', () => {
489489
const data = SampleTestData.personIDNameData();
490-
const addRow4 = { ID: 4, Name: 'Peter' };
491-
const addRow5 = { ID: 5, Name: 'Mimi' };
492-
const addRow6 = { ID: 6, Name: 'Pedro' };
490+
const addRow4 = { ID: 4, IsEmployed: true, Name: 'Peter' };
491+
const addRow5 = { ID: 5, IsEmployed: true, Name: 'Mimi' };
492+
const addRow6 = { ID: 6, IsEmployed: false, Name: 'Pedro' };
493493
const transactions: Transaction[] = [
494494
{ id: addRow4.ID, newValue: addRow4, type: TransactionType.ADD },
495495
{ id: addRow5.ID, newValue: addRow5, type: TransactionType.ADD },

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
>
99
</ng-template>
1010
<ng-template #defaultCell>
11-
<div *ngIf="column.dataType !== 'boolean'"
11+
<div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
1212
igxTextHighlight
1313
class="igx-grid__td-text"
1414
style="pointer-events: none;"
@@ -46,13 +46,14 @@
4646
: value
4747
}}</div>
4848
<igx-icon
49-
*ngIf="column.dataType === 'boolean'"
49+
*ngIf="column.dataType === 'boolean' && !this.formatter"
5050
[ngClass]="{ 'igx-icon--success': value, 'igx-icon--error': !value }"
5151
>{{ value ? "check" : "close" }}</igx-icon
5252
>
5353
</ng-template>
5454
<ng-template #addRowCell let-cell="cell">
55-
<div igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
55+
<div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
56+
igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
5657
[cssClass]="highlightClass"
5758
[activeCssClass]="activeHighlightClass"
5859
[groupName]="gridID"

‎projects/igniteui-angular/src/lib/grids/grid/column.spec.ts

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -126,11 +126,16 @@ describe('IgxGrid - Column properties #grid', () => {
126126
const grid = fix.componentInstance.grid;
127127
const formatter = fix.componentInstance.multiplier;
128128

129+
const boolFormatter = fix.componentInstance.boolFormatter;
130+
129131
expect(grid.columnList.first.formatter).toBeDefined();
130132

131133
for (let i = 0; i < 3; i++) {
132134
const cell = grid.gridAPI.get_cell_by_index(i, 'ID');
133135
expect(cell.nativeElement.textContent).toMatch(formatter(cell.value));
136+
137+
const cellBool = grid.gridAPI.get_cell_by_index(i, 'IsEmployed');
138+
expect(cellBool.nativeElement.textContent).toMatch(boolFormatter(cellBool.value));
134139
}
135140
});
136141

@@ -161,18 +166,18 @@ describe('IgxGrid - Column properties #grid', () => {
161166

162167
headers = fix.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
163168
expect(headers[0].nativeElement.textContent).toMatch('ID');
164-
expect(headers[1].nativeElement.textContent).toMatch('Name');
169+
expect(headers[2].nativeElement.textContent).toMatch('Name');
165170

166171
// Swap columns
167172
grid.moveColumn(grid.columnList.first, grid.columnList.last);
168173
fix.detectChanges();
169174

170-
expect(grid.columnList.first.field).toMatch('Name');
175+
expect(grid.columnList.first.field).toMatch('IsEmployed');
171176
expect(grid.columnList.last.field).toMatch('ID');
172177

173178
headers = fix.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
174-
expect(headers[0].nativeElement.textContent).toMatch('Name');
175-
expect(headers[1].nativeElement.textContent).toMatch('ID');
179+
expect(headers[0].nativeElement.textContent).toMatch('IsEmployed');
180+
expect(headers[1].nativeElement.textContent).toMatch('Name');
176181
});
177182

178183
it('should support adding and removing columns through a declared iterable', fakeAsync(/** columnList.changes rAF */() => {

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

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
<igx-chip *ngIf="displayPinnedChip" class="igx-grid__td--pinned-chip" [disabled]="true" [displayDensity]="'compact'">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>
33
</ng-template>
44
<ng-template #defaultCell>
5-
<div igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
5+
<div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
6+
igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
67
[cssClass]="highlightClass"
78
[activeCssClass]="activeHighlightClass"
89
[groupName]="gridID"
@@ -13,18 +14,27 @@
1314
? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)
1415
: column.dataType === 'currency'
1516
? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)
16-
: column.dataType === 'percent' ? (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value"
17+
: column.dataType === 'percent'
18+
? (value | percent:column.pipeArgs.digitsInfo:grid.locale)
19+
: value"
1720
[row]="rowData"
1821
[column]="this.column.field"
1922
[containerClass]="'igx-grid__td-text'"
2023
[metadata]="searchMetadata">{{ formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === "number"
2124
? (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')
2225
? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'
2326
? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent'
24-
? (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value }}</div>
27+
? (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value}}</div>
28+
29+
<igx-icon
30+
*ngIf="column.dataType === 'boolean' && !this.formatter"
31+
[ngClass]="{ 'igx-icon--success': value, 'igx-icon--error': !value }"
32+
>{{ value ? "check" : "close" }}</igx-icon
33+
>
2534
</ng-template>
2635
<ng-template #addRowCell let-cell="cell">
27-
<div igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
36+
<div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
37+
igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
2838
[cssClass]="highlightClass"
2939
[activeCssClass]="activeHighlightClass"
3040
[groupName]="gridID"

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
>
99
</ng-template>
1010
<ng-template #defaultCell>
11-
<div *ngIf="column.dataType !== 'boolean'"
11+
<div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
1212
igxTextHighlight
1313
class="igx-grid__td-text"
1414
style="pointer-events: none;"
@@ -46,13 +46,15 @@
4646
: value
4747
}}</div>
4848
<igx-icon
49-
*ngIf="column.dataType === 'boolean'"
49+
*ngIf="column.dataType === 'boolean' && !this.formatter"
5050
[ngClass]="{ 'igx-icon--success': value, 'igx-icon--error': !value }"
5151
>{{ value ? "check" : "close" }}</igx-icon
5252
>
5353
</ng-template>
5454
<ng-template #addRowCell let-cell="cell">
55-
<div igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
55+
<div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
56+
igxTextHighlight class="igx-grid__td-text"
57+
style="pointer-events: none"
5658
[cssClass]="highlightClass"
5759
[activeCssClass]="activeHighlightClass"
5860
[groupName]="gridID"

‎projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,10 @@ export class ColumnCellFormatterComponent extends BasicGridComponent {
162162
public containsY(_: number, data: { ID: number; Name: string }) {
163163
return data.Name.includes('y') ? 'true' : 'false';
164164
}
165+
166+
public boolFormatter(value: boolean): string {
167+
return value ? 'check' : 'close';
168+
}
165169
}
166170

167171
@Component({

‎projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -141,9 +141,9 @@ export class SampleTestData {
141141

142142
/* Data fields: ID: number, Name: string; 3 items. */
143143
public static personIDNameData = () => ([
144-
{ ID: 1, Name: 'Johny' },
145-
{ ID: 2, Name: 'Sally' },
146-
{ ID: 3, Name: 'Tim' }
144+
{ ID: 1, IsEmployed: true, Name: 'Johny' },
145+
{ ID: 2, IsEmployed: true, Name: 'Sally' },
146+
{ ID: 3, IsEmployed: false, Name: 'Tim' },
147147
]);
148148

149149
/* Data fields: FirstName: string, LastName: string, age:number; 3 items. */

‎projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,7 @@ export class ColumnDefinitions {
217217

218218
public static idNameFormatter = `
219219
<igx-column field="ID" [formatter]="multiplier"></igx-column>
220+
<igx-column field="IsEmployed" [dataType]="'boolean'"></igx-column>
220221
<igx-column field="Name"></igx-column>
221222
`;
222223

‎src/app/grid-formatting/grid-formatting.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ <h3>Grid with local data</h3>
2323
</igx-column>
2424
<igx-column width="200px" field="OrderDate" header="Unbound column" [filterable]="true" [hasSummary]="true" [sortable]="true">
2525
<ng-template igxCell let-cell="cell" let-val>
26-
{{ cell.rowData.UnitsInStock }}
26+
{{ getVal(cell) }}
2727
</ng-template>
2828
</igx-column>
2929
<igx-column field="ReorderLevel" width="200px" [sortable]="true" [filterable]="true" [dataType]="'number'" [hasSummary]="false">

0 commit comments

Comments
 (0)