Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(grid): use formattter function for boolean columns-10.2.x #8978 #10168

Merged
merged 9 commits into from
Sep 28, 2021
Merged

fix(grid): use formattter function for boolean columns-10.2.x #8978 #10168

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
998b85e
fix(grid): use formattter function for boolean columns #8978
Volen99 Sep 17, 2021
37f2955
test(grid): Change variable name #8978
Volen99 Sep 20, 2021
2b647d4
chore(*): Remove unnecessary semicolon
Volen99 Sep 21, 2021
2846996
fix(grid): when formatter is missing display icon only #8978
Volen99 Sep 23, 2021
1aa83dc
fix(grid): fix "This condition will always return 'false' [...]" #8978
Volen99 Sep 24, 2021
0f015c1
fix(grid): fix unnecessary empty div #8978
Volen99 Sep 27, 2021
6a0b188
chore(*): fix test when get cell by index
hanastasov Sep 28, 2021
aa049de
fix(grid): add igx-icon template for boolean expandable cell
hanastasov Sep 28, 2021
d5c3d0d
Merge branch '10.2.x' into VDyulgerov/fix-boolean-10.2.x
kdinev Sep 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions projects/igniteui-angular/src/lib/data-operations/data-util.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -490,9 +490,9 @@ function testMerging() {
describe('Test merging', () => {
it('Should merge add transactions correctly', () => {
const data = SampleTestData.personIDNameData();
const addRow4 = { ID: 4, Name: 'Peter' };
const addRow5 = { ID: 5, Name: 'Mimi' };
const addRow6 = { ID: 6, Name: 'Pedro' };
const addRow4 = { ID: 4, IsEmployed: true, Name: 'Peter' };
const addRow5 = { ID: 5, IsEmployed: true, Name: 'Mimi' };
const addRow6 = { ID: 6, IsEmployed: false, Name: 'Pedro' };
const transactions: Transaction[] = [
{ id: addRow4.ID, newValue: addRow4, type: TransactionType.ADD },
{ id: addRow5.ID, newValue: addRow5, type: TransactionType.ADD },
Expand Down
7 changes: 4 additions & 3 deletions projects/igniteui-angular/src/lib/grids/cell.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
>
</ng-template>
<ng-template #defaultCell>
<div *ngIf="column.dataType !== 'boolean'"
<div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
igxTextHighlight
class="igx-grid__td-text"
style="pointer-events: none;"
Expand Down Expand Up @@ -38,13 +38,14 @@
: value
}}</div>
<igx-icon
*ngIf="column.dataType === 'boolean'"
*ngIf="column.dataType === 'boolean' && !this.formatter"
[ngClass]="{ 'igx-icon--success': value, 'igx-icon--error': !value }"
>{{ value ? "check" : "close" }}</igx-icon
>
</ng-template>
<ng-template #addRowCell let-cell="cell">
<div igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
<div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
[cssClass]="highlightClass"
[activeCssClass]="activeHighlightClass"
[groupName]="gridID"
Expand Down
13 changes: 9 additions & 4 deletions projects/igniteui-angular/src/lib/grids/grid/column.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,11 +114,16 @@ describe('IgxGrid - Column properties #grid', () => {
const grid = fix.componentInstance.grid;
const formatter = fix.componentInstance.multiplier;

const boolFormatter = fix.componentInstance.boolFormatter;

expect(grid.columnList.first.formatter).toBeDefined();

for (let i = 0; i < 3; i++) {
const cell = grid.getCellByColumn(i, 'ID');
expect(cell.nativeElement.textContent).toMatch(formatter(cell.value));

const cellBool = grid.gridAPI.get_cell_by_index(i, 1);
expect(cellBool.nativeElement.textContent).toMatch(boolFormatter(cellBool.value));
}
});

Expand All @@ -134,18 +139,18 @@ describe('IgxGrid - Column properties #grid', () => {

headers = fix.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
expect(headers[0].nativeElement.textContent).toMatch('ID');
expect(headers[1].nativeElement.textContent).toMatch('Name');
expect(headers[2].nativeElement.textContent).toMatch('Name');

// Swap columns
grid.moveColumn(grid.columnList.first, grid.columnList.last);
fix.detectChanges();

expect(grid.columnList.first.field).toMatch('Name');
expect(grid.columnList.first.field).toMatch('IsEmployed');
expect(grid.columnList.last.field).toMatch('ID');

headers = fix.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
expect(headers[0].nativeElement.textContent).toMatch('Name');
expect(headers[1].nativeElement.textContent).toMatch('ID');
expect(headers[0].nativeElement.textContent).toMatch('IsEmployed');
expect(headers[1].nativeElement.textContent).toMatch('Name');
});

it('should support adding and removing columns through a declared iterable', fakeAsync(/** columnList.changes rAF */() => {
Expand Down
6 changes: 4 additions & 2 deletions projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
<igx-chip *ngIf="displayPinnedChip" class="igx-grid__td--pinned-chip" [disabled]="true" [displayDensity]="'compact'">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>
</ng-template>
<ng-template #defaultCell>
<div igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
<div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
[cssClass]="highlightClass"
[activeCssClass]="activeHighlightClass"
[groupName]="gridID"
Expand All @@ -13,7 +14,8 @@
[metadata]="searchMetadata">{{ formatter ? (value | columnFormatter:formatter) : column.dataType === 'number' ? (value | number:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'date' ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : value }}</div>
</ng-template>
<ng-template #addRowCell let-cell="cell">
<div igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
<div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
[cssClass]="highlightClass"
[activeCssClass]="activeHighlightClass"
[groupName]="gridID"
Expand Down
8 changes: 5 additions & 3 deletions projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
>
</ng-template>
<ng-template #defaultCell>
<div *ngIf="column.dataType !== 'boolean'"
<div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
igxTextHighlight
class="igx-grid__td-text"
style="pointer-events: none;"
Expand Down Expand Up @@ -38,13 +38,15 @@
: value
}}</div>
<igx-icon
*ngIf="column.dataType === 'boolean'"
*ngIf="column.dataType === 'boolean' && !this.formatter"
[ngClass]="{ 'igx-icon--success': value, 'igx-icon--error': !value }"
>{{ value ? "check" : "close" }}</igx-icon
>
</ng-template>
<ng-template #addRowCell let-cell="cell">
<div igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
<div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
igxTextHighlight class="igx-grid__td-text"
style="pointer-events: none"
[cssClass]="highlightClass"
[activeCssClass]="activeHighlightClass"
[groupName]="gridID"
Expand Down
8 changes: 8 additions & 0 deletions projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,14 @@ export class ColumnCellFormatterComponent extends BasicGridComponent {
public multiplier(value: number): string {
return `${value * value}`;
}

public containsY(_: number, data: { ID: number; Name: string }) {
return data.Name.includes('y') ? 'true' : 'false';
}

public boolFormatter(value: boolean): string {
return value ? 'check' : 'close';
}
}

@Component({
Expand Down
6 changes: 3 additions & 3 deletions projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,9 +141,9 @@ export class SampleTestData {

/* Data fields: ID: number, Name: string; 3 items. */
public static personIDNameData = () => ([
{ ID: 1, Name: "Johny" },
{ ID: 2, Name: "Sally" },
{ ID: 3, Name: "Tim" }
{ ID: 1, IsEmployed: true, Name: 'Johny' },
{ ID: 2, IsEmployed: true, Name: 'Sally' },
{ ID: 3, IsEmployed: false, Name: 'Tim' },
])

/* Data fields: FirstName: string, LastName: string, age:number; 3 items. */
Expand Down
1 change: 1 addition & 0 deletions projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,7 @@ export class ColumnDefinitions {

public static idNameFormatter = `
<igx-column field="ID" [formatter]="multiplier"></igx-column>
<igx-column field="IsEmployed" [dataType]="'boolean'"></igx-column>
<igx-column field="Name"></igx-column>
`;

Expand Down