Skip to content

Commit ed37e08

Browse files
LipataLipata
authored
Merge pull request #7849 from IgniteUI/rkaraivanov/column-formatters-performance
perf(grid): Apply column formatters through a pipe
2 parents 0547a1a + 65a8954 commit ed37e08

File tree

7 files changed

+45
-22
lines changed

7 files changed

+45
-22
lines changed

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,15 @@
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 style="pointer-events: none" [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
6-
[value]="formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value"
7-
[row]="rowData" [column]="this.column.field" [containerClass]="'igx-grid__td-text'" [metadata]="searchMetadata"
8-
class="igx-grid__td-text">{{ formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal:
9-
grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value }}</div>
5+
<div igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
6+
[cssClass]="highlightClass"
7+
[activeCssClass]="activeHighlightClass"
8+
[groupName]="gridID"
9+
[value]="formatter ? (value | columnFormatter:formatter) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value"
10+
[row]="rowData"
11+
[column]="this.column.field"
12+
[containerClass]="'igx-grid__td-text'"
13+
[metadata]="searchMetadata">{{ formatter ? (value | columnFormatter:formatter) : column.dataType === 'number' ? (value | igxdecimal:grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value }}</div>
1014
</ng-template>
1115
<ng-template #inlineEditor let-cell="cell">
1216
<ng-container *ngIf="column.dataType === 'string'">

‎projects/igniteui-angular/src/lib/grids/common/grid-pipes.module.ts

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ import {
1414
IgxGridRowPinningPipe,
1515
IgxGridDataMapperPipe,
1616
IgxStringReplacePipe,
17-
IgxGridTransactionStatePipe
17+
IgxGridTransactionStatePipe,
18+
IgxColumnFormatterPipe
1819
} from './pipes';
1920

2021
@NgModule({
@@ -32,7 +33,8 @@ import {
3233
IgxGridRowPinningPipe,
3334
IgxGridDataMapperPipe,
3435
IgxStringReplacePipe,
35-
IgxGridTransactionStatePipe
36+
IgxGridTransactionStatePipe,
37+
IgxColumnFormatterPipe
3638
],
3739
exports: [
3840
IgxDatePipeComponent,
@@ -48,7 +50,8 @@ import {
4850
IgxGridRowPinningPipe,
4951
IgxGridDataMapperPipe,
5052
IgxStringReplacePipe,
51-
IgxGridTransactionStatePipe
53+
IgxGridTransactionStatePipe,
54+
IgxColumnFormatterPipe
5255
],
5356
imports: [
5457
CommonModule

‎projects/igniteui-angular/src/lib/grids/common/pipes.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -279,3 +279,11 @@ export class IgxGridTransactionStatePipe implements PipeTransform {
279279
}
280280
}
281281
}
282+
283+
@Pipe({ name: 'columnFormatter' })
284+
export class IgxColumnFormatterPipe implements PipeTransform {
285+
286+
transform(value: any, formatter: (v: any) => any) {
287+
return formatter(value);
288+
}
289+
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -881,8 +881,8 @@ export class LargePinnedColGridComponent implements OnInit {
881881
this.data = SampleTestData.generateProductData(75);
882882
}
883883

884-
public returnVal() {
885-
return this.value;
884+
public returnVal(value) {
885+
return value;
886886
}
887887
}
888888

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,15 @@
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 style="pointer-events: none" [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
6-
[value]="formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value"
7-
[row]="rowData" [column]="this.column.field" [containerClass]="'igx-grid__td-text'" [metadata]="searchMetadata"
8-
class="igx-grid__td-text">{{ formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal:
9-
grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value }}</div>
5+
<div igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
6+
[cssClass]="highlightClass"
7+
[activeCssClass]="activeHighlightClass"
8+
[groupName]="gridID"
9+
[value]="formatter ? (value | columnFormatter:formatter) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value"
10+
[row]="rowData"
11+
[column]="this.column.field"
12+
[containerClass]="'igx-grid__td-text'"
13+
[metadata]="searchMetadata">{{ formatter ? (value | columnFormatter:formatter) : column.dataType === 'number' ? (value | igxdecimal:grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value }}</div>
1014
</ng-template>
1115
<ng-template #inlineEditor let-cell="cell">
1216
<ng-container *ngIf="column.dataType === 'string'">

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2415,8 +2415,8 @@ export class IgxGridFormattingComponent extends BasicGridComponent {
24152415
public width = '600px';
24162416
public height = '400px';
24172417
public value: any;
2418-
public formatNum() {
2419-
return this.value.toExponential().toString();
2418+
public formatNum(value) {
2419+
return value.toExponential().toString();
24202420
}
24212421
}
24222422

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,15 @@
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 style="pointer-events: none" [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
6-
[value]="formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value"
7-
[row]="rowData" [column]="this.column.field" [containerClass]="'igx-grid__td-text'" [metadata]="searchMetadata"
8-
class="igx-grid__td-text">{{ formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal:
9-
grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value }}</div>
5+
<div igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
6+
[cssClass]="highlightClass"
7+
[activeCssClass]="activeHighlightClass"
8+
[groupName]="gridID"
9+
[value]="formatter ? (value | columnFormatter:formatter) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value"
10+
[row]="rowData"
11+
[column]="this.column.field"
12+
[containerClass]="'igx-grid__td-text'"
13+
[metadata]="searchMetadata">{{ formatter ? (value | columnFormatter:formatter) : column.dataType === 'number' ? (value | igxdecimal:grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value }}</div>
1014
</ng-template>
1115
<ng-template #inlineEditor let-cell="cell">
1216
<ng-container *ngIf="column.dataType === 'string'">

0 commit comments

Comments
 (0)