@@ -56,12 +56,15 @@ describe('IgxGrid - Column properties #grid', () => {
56
56
57
57
const headerSpans : DebugElement [ ] = fix . debugElement . queryAll ( By . css ( '.header' ) ) ;
58
58
const cellSpans : DebugElement [ ] = fix . debugElement . queryAll ( By . css ( '.cell' ) ) ;
59
+ const summarySpans : DebugElement [ ] = fix . debugElement . queryAll ( By . css ( '.summary' ) ) ;
59
60
60
61
grid . columnList . forEach ( ( column ) => expect ( column . bodyTemplate ) . toBeDefined ( ) ) ;
61
62
grid . columnList . forEach ( ( column ) => expect ( column . headerTemplate ) . toBeDefined ( ) ) ;
63
+ grid . columnList . forEach ( ( column ) => expect ( column . summaryTemplate ) . toBeDefined ( ) ) ;
62
64
63
65
headerSpans . forEach ( ( span ) => expect ( span . nativeElement . textContent ) . toMatch ( 'Header text' ) ) ;
64
66
cellSpans . forEach ( ( span ) => expect ( span . nativeElement . textContent ) . toMatch ( 'Cell text' ) ) ;
67
+ summarySpans . forEach ( ( span ) => expect ( span . nativeElement . textContent ) . toMatch ( 'Summarry text' ) ) ;
65
68
} ) ;
66
69
67
70
it ( 'should provide a way to change templates dynamically' , ( ) => {
@@ -72,14 +75,17 @@ describe('IgxGrid - Column properties #grid', () => {
72
75
73
76
grid . columnList . forEach ( ( column ) => column . headerTemplate = fix . componentInstance . newHeaderTemplate ) ;
74
77
grid . columnList . forEach ( ( column ) => column . bodyTemplate = fix . componentInstance . newCellTemplate ) ;
78
+ grid . columnList . forEach ( ( column ) => column . summaryTemplate = fix . componentInstance . newSummaryTemplate ) ;
75
79
76
80
fix . detectChanges ( ) ;
77
81
78
82
const headerSpans : DebugElement [ ] = fix . debugElement . queryAll ( By . css ( '.new-header' ) ) ;
79
83
const cellSpans : DebugElement [ ] = fix . debugElement . queryAll ( By . css ( '.new-cell' ) ) ;
84
+ const summarySpans : DebugElement [ ] = fix . debugElement . queryAll ( By . css ( '.new-summary' ) ) ;
80
85
81
86
headerSpans . forEach ( ( span ) => expect ( span . nativeElement . textContent ) . toMatch ( 'New header text' ) ) ;
82
87
cellSpans . forEach ( ( span ) => expect ( span . nativeElement . textContent ) . toMatch ( 'New cell text' ) ) ;
88
+ summarySpans . forEach ( ( span ) => expect ( span . nativeElement . textContent ) . toMatch ( 'New summary text' ) ) ;
83
89
} ) ;
84
90
85
91
it ( 'should reflect column hiding correctly in the DOM dynamically' , ( ) => {
@@ -221,12 +227,12 @@ describe('IgxGrid - Column properties #grid', () => {
221
227
cityCol = grid . getColumnByName ( 'City' ) ;
222
228
expect ( cityCol ) . not . toBeDefined ( ) ;
223
229
224
- // add to pinned area
230
+ // add to pinned area
225
231
fix . componentInstance . columns . push ( { field : 'City' , width : 150 , movable : true , type : 'string' , pinned : true } ) ;
226
232
fix . detectChanges ( ) ;
227
233
228
234
cityCol = grid . getColumnByName ( 'City' ) ;
229
- expect ( cityCol . visibleIndex ) . toEqual ( 1 ) ;
235
+ expect ( cityCol . visibleIndex ) . toEqual ( 1 ) ;
230
236
} ) ) ;
231
237
232
238
it ( 'should apply columnWidth on columns that don\'t have explicit width' , ( ) => {
@@ -321,6 +327,9 @@ describe('IgxGrid - Column properties #grid', () => {
321
327
grid . headerCellList . forEach ( header =>
322
328
expect ( header . nativeElement . querySelector ( '.customHeaderTemplate' ) ) . toBeDefined ( ) ) ;
323
329
330
+ grid . summariesRowList . forEach ( summary =>
331
+ expect ( summary . nativeElement . querySelector ( '.customSummaryTemplate' ) ) . not . toBeNull ( ) ) ;
332
+
324
333
const cell = grid . getCellByColumn ( 0 , 'ID' ) ;
325
334
cell . editMode = true ;
326
335
fixture . detectChanges ( ) ;
@@ -334,7 +343,7 @@ describe('IgxGrid - Column properties #grid', () => {
334
343
fixture . detectChanges ( ) ;
335
344
336
345
const grid = fixture . componentInstance . instance ;
337
- const contextObject = { property1 : 'cellContent' , property2 : 'cellContent1' } ;
346
+ const contextObject = { property1 : 'cellContent' , property2 : 'cellContent1' } ;
338
347
const firstColumn = grid . columnList . get ( 0 ) ;
339
348
const secondColumn = grid . columnList . get ( 1 ) ;
340
349
@@ -624,7 +633,7 @@ describe('IgxGrid - Column properties #grid', () => {
624
633
[ 'Count' , 'Min' , 'Max' , 'Sum' , 'Avg' ] , [ '10' , '0 €' , '20 000 €' , '39 004 €' , '3 900,4 €' ] ) ;
625
634
} ) ;
626
635
627
- it ( 'filtering UI list should be populated with correct values based on the currency code, locale and/or pipeArgs' , fakeAsync ( ( ) => {
636
+ it ( 'filtering UI list should be populated with correct values based on the currency code, locale and/or pipeArgs' , fakeAsync ( ( ) => {
628
637
const fix = TestBed . createComponent ( IgxGridCurrencyColumnComponent ) ;
629
638
tick ( ) ;
630
639
fix . detectChanges ( ) ;
@@ -653,7 +662,7 @@ describe('IgxGrid - Column properties #grid', () => {
653
662
digitsInfo : '3.3-3' ,
654
663
currencyCode : 'EUR' ,
655
664
display : 'symbol-narrow'
656
- } ;
665
+ } ;
657
666
fix . detectChanges ( ) ;
658
667
659
668
GridFunctions . clickExcelFilterIcon ( fix , unitsColumn . field ) ;
@@ -684,7 +693,7 @@ describe('IgxGrid - Column properties #grid', () => {
684
693
685
694
discountColumn . pipeArgs = {
686
695
digitsInfo : '3.2-2' ,
687
- } ;
696
+ } ;
688
697
fix . detectChanges ( ) ;
689
698
690
699
grid . sort ( { fieldName : 'Discount' , dir : SortingDirection . Desc , ignoreCase : false } ) ;
@@ -775,7 +784,7 @@ describe('IgxGrid - Column properties #grid', () => {
775
784
[ 'Count' , 'Min' , 'Max' , 'Sum' , 'Avg' ] , [ '10' , '-70%' , '1,100%' , '2,153.9%' , '215.39%' ] ) ;
776
785
} ) ;
777
786
778
- it ( 'filtering UI list should be populated with correct values based on the currency code, locale and/or pipeArgs' , fakeAsync ( ( ) => {
787
+ it ( 'filtering UI list should be populated with correct values based on the currency code, locale and/or pipeArgs' , fakeAsync ( ( ) => {
779
788
const fix = TestBed . createComponent ( IgxGridPercentColumnComponent ) ;
780
789
tick ( ) ;
781
790
fix . detectChanges ( ) ;
@@ -804,7 +813,7 @@ describe('IgxGrid - Column properties #grid', () => {
804
813
digitsInfo : '3.3-3' ,
805
814
currencyCode : 'EUR' ,
806
815
display : 'symbol-narrow'
807
- } ;
816
+ } ;
808
817
fix . detectChanges ( ) ;
809
818
810
819
GridFunctions . clickExcelFilterIcon ( fix , unitsColumn . field ) ;
@@ -971,7 +980,7 @@ describe('IgxGrid - Column properties #grid', () => {
971
980
[ 'Count' , 'Earliest' , 'Latest' ] , [ '10' , '6:40 AM' , '8:20 PM' ] ) ;
972
981
} ) ;
973
982
974
- it ( 'DateTime: filtering UI list should be populated with correct values based on the pipeArgs' , fakeAsync ( ( ) => {
983
+ it ( 'DateTime: filtering UI list should be populated with correct values based on the pipeArgs' , fakeAsync ( ( ) => {
975
984
const fix = TestBed . createComponent ( IgxGridDateTimeColumnComponent ) ;
976
985
tick ( ) ;
977
986
fix . detectChanges ( ) ;
@@ -998,7 +1007,7 @@ describe('IgxGrid - Column properties #grid', () => {
998
1007
999
1008
orderDateColumn . pipeArgs = {
1000
1009
format : 'short'
1001
- } ;
1010
+ } ;
1002
1011
fix . detectChanges ( ) ;
1003
1012
1004
1013
GridFunctions . clickExcelFilterIcon ( fix , orderDateColumn . field ) ;
@@ -1013,7 +1022,7 @@ describe('IgxGrid - Column properties #grid', () => {
1013
1022
expect ( ( checkBoxes [ 3 ] . querySelector ( '.igx-checkbox__label' ) as HTMLElement ) . innerText ) . toEqual ( '8/18/16, 11:17 AM' ) ;
1014
1023
} ) ) ;
1015
1024
1016
- it ( 'Time: filtering UI list should be populated with correct values based on the pipeArgs' , fakeAsync ( ( ) => {
1025
+ it ( 'Time: filtering UI list should be populated with correct values based on the pipeArgs' , fakeAsync ( ( ) => {
1017
1026
const fix = TestBed . createComponent ( IgxGridDateTimeColumnComponent ) ;
1018
1027
tick ( ) ;
1019
1028
fix . detectChanges ( ) ;
@@ -1054,7 +1063,7 @@ describe('IgxGrid - Column properties #grid', () => {
1054
1063
expect ( ( checkBoxes [ 3 ] . querySelector ( '.igx-checkbox__label' ) as HTMLElement ) . innerText ) . toEqual ( '12:12 PM' ) ;
1055
1064
} ) ) ;
1056
1065
1057
- it ( 'DateTime: dateTime input should be disabled when try to filter based on unary conditions - today or etc. #ivy' , fakeAsync ( ( ) => {
1066
+ it ( 'DateTime: dateTime input should be disabled when try to filter based on unary conditions - today or etc. #ivy' , fakeAsync ( ( ) => {
1058
1067
const fix = TestBed . createComponent ( IgxGridDateTimeColumnComponent ) ;
1059
1068
tick ( ) ;
1060
1069
fix . detectChanges ( ) ;
@@ -1090,9 +1099,9 @@ describe('IgxGrid - Column properties #grid', () => {
1090
1099
fix . detectChanges ( ) ;
1091
1100
1092
1101
const sortedValues = [ new Date ( 2015 , 2 , 12 , 21 , 31 , 22 ) , new Date ( 2015 , 9 , 1 , 11 , 37 , 22 ) , new Date ( 2016 , 7 , 18 , 11 , 17 , 22 ) ,
1093
- new Date ( 2018 , 6 , 14 , 17 , 27 , 23 ) , new Date ( 2019 , 3 , 17 , 5 , 5 , 15 ) , new Date ( 2019 , 9 , 30 , 16 , 17 , 27 ) ,
1094
- new Date ( 2021 , 4 , 11 , 7 , 47 , 1 ) , new Date ( 2021 , 4 , 11 , 18 , 37 , 2 ) ,
1095
- new Date ( 2021 , 7 , 3 , 15 , 15 , 0 ) , new Date ( 2021 , 7 , 3 , 15 , 15 , 0 ) ] ;
1102
+ new Date ( 2018 , 6 , 14 , 17 , 27 , 23 ) , new Date ( 2019 , 3 , 17 , 5 , 5 , 15 ) , new Date ( 2019 , 9 , 30 , 16 , 17 , 27 ) ,
1103
+ new Date ( 2021 , 4 , 11 , 7 , 47 , 1 ) , new Date ( 2021 , 4 , 11 , 18 , 37 , 2 ) ,
1104
+ new Date ( 2021 , 7 , 3 , 15 , 15 , 0 ) , new Date ( 2021 , 7 , 3 , 15 , 15 , 0 ) ] ;
1096
1105
1097
1106
expect ( grid . rowList . length ) . toEqual ( sortedValues . length ) ;
1098
1107
sortedValues . forEach ( ( value , index ) => {
@@ -1119,7 +1128,7 @@ describe('IgxGrid - Column properties #grid', () => {
1119
1128
fix . detectChanges ( ) ;
1120
1129
1121
1130
const sortedValues = [ '6:40:18 AM' , '8:37:11 AM' , '12:12:02 PM' , '12:47:42 PM' , '12:47:42 PM' , '2:07:12 PM' ,
1122
- '2:30:00 PM' , '3:30:22 PM' , '3:30:30 PM' , '8:20:24 PM' ] ;
1131
+ '2:30:00 PM' , '3:30:22 PM' , '3:30:30 PM' , '8:20:24 PM' ] ;
1123
1132
1124
1133
expect ( grid . rowList . length ) . toEqual ( sortedValues . length ) ;
1125
1134
sortedValues . forEach ( ( value , index ) => {
@@ -1158,6 +1167,10 @@ export class ColumnsFromIterableComponent {
1158
1167
1159
1168
<ng-template #newCell>
1160
1169
<span class="new-cell">New cell text</span>
1170
+ </ng-template>
1171
+
1172
+ <ng-template #newSummary>
1173
+ <span class="new-summary">New summary text</span>
1161
1174
</ng-template>`
1162
1175
} )
1163
1176
export class TemplatedColumnsComponent {
@@ -1170,6 +1183,9 @@ export class TemplatedColumnsComponent {
1170
1183
@ViewChild ( 'newCell' , { read : TemplateRef , static : true } )
1171
1184
public newCellTemplate : TemplateRef < any > ;
1172
1185
1186
+ @ViewChild ( 'newSummary' , { read : TemplateRef , static : true } )
1187
+ public newSummaryTemplate : TemplateRef < any > ;
1188
+
1173
1189
public data = SampleTestData . personIDNameData ( ) ;
1174
1190
}
1175
1191
@@ -1178,7 +1194,7 @@ export class TemplatedColumnsComponent {
1178
1194
<igx-grid [data]="data">
1179
1195
<igx-column *ngFor="let field of columns" [field]="field" [editable]="true"
1180
1196
[cellTemplate]="cell" [headerTemplate]="header"
1181
- [cellEditorTemplate]="editor">
1197
+ [cellEditorTemplate]="editor" [hasSummary]="true" [summaryTemplate]="summary" >
1182
1198
</igx-column>
1183
1199
</igx-grid>
1184
1200
@@ -1193,6 +1209,10 @@ export class TemplatedColumnsComponent {
1193
1209
<ng-template #editor let-value>
1194
1210
<span class="customEditorTemplate">{{ value }}</span>
1195
1211
</ng-template>
1212
+
1213
+ <ng-template #summaryTemplate igxSummary let-summaryResults>
1214
+ <span class="customSummaryTemplate">{{ summaryResults[0].label }}: {{ summaryResults[0].summaryResult }}</span>
1215
+ </ng-template>
1196
1216
`
1197
1217
} )
1198
1218
export class TemplatedInputColumnsComponent {
@@ -1223,7 +1243,7 @@ export class TemplatedInputColumnsComponent {
1223
1243
export class TemplatedContextInputColumnsComponent {
1224
1244
@ViewChild ( IgxGridComponent , { read : IgxGridComponent , static : true } )
1225
1245
public instance : IgxGridComponent ;
1226
- public contextObject = { property1 : 'cellContent' , property2 : 'cellContent1' } ;
1246
+ public contextObject = { property1 : 'cellContent' , property2 : 'cellContent1' } ;
1227
1247
1228
1248
public data = SampleTestData . personNameAgeData ( ) ;
1229
1249
}
0 commit comments