Skip to content

Commit f90a7a0

Browse files
onlyexeptionChronosSF
onlyexeption
and
ChronosSF
authored
Add summary export samples to grids (#3148)
* feat(grid): add summary export samples * chore(*): lower grid heights * chore(*): address pr comments * resolving templating issues * removing paging from sample for better sizing * fix wrong id Co-authored-by: Stamen Stoychev <sstoychev@infragistics.com>
1 parent 579ed56 commit f90a7a0

21 files changed

Lines changed: 619 additions & 6 deletions

‎live-editing/configs/GridConfigGenerator.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1410,6 +1410,18 @@ export class GridConfigGenerator implements IConfigGenerator {
14101410
})
14111411
}));
14121412

1413+
configs.push(new Config({
1414+
component: 'GridSummaryExportComponent',
1415+
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/nwindData.ts'],
1416+
appModuleConfig: new AppModuleConfig({
1417+
imports: ['IgxGridModule', 'GridSummaryExportComponent', 'IgxPreventDocumentScrollModule', 'IgxExcelExporterService'],
1418+
ngDeclarations: ['GridSummaryExportComponent'],
1419+
ngImports: ['IgxPreventDocumentScrollModule', 'IgxGridModule', 'IgxExcelExporterService'],
1420+
ngProviders: ['IgxExcelExporterService']
1421+
})
1422+
}));
1423+
1424+
14131425
return configs;
14141426
}
14151427
}

‎live-editing/configs/HierarchicalGridConfigGenerator.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -999,6 +999,18 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
999999
})
10001000
}));
10011001

1002+
configs.push(new Config({
1003+
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/singersData.ts',
1004+
'/src/app/hierarchical-grid/models.ts'],
1005+
appModuleConfig: new AppModuleConfig({
1006+
imports: ['IgxHierarchicalGridModule', 'HGridSummaryExportComponent', 'IgxPreventDocumentScrollModule', 'IgxExcelExporterService'],
1007+
ngDeclarations: ['HGridSummaryExportComponent'],
1008+
ngImports: ['IgxPreventDocumentScrollModule', 'IgxHierarchicalGridModule', 'IgxExcelExporterService'],
1009+
ngProviders: ['IgxExcelExporterService']
1010+
}),
1011+
component: 'HGridSummaryExportComponent'
1012+
}));
1013+
10021014
return configs;
10031015
}
10041016
}

‎live-editing/configs/TreeGridConfigGenerator.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1201,6 +1201,18 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
12011201
})
12021202
}));
12031203

1204+
configs.push(new Config({
1205+
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/tree-grid/data/foods.ts'],
1206+
appModuleConfig: new AppModuleConfig({
1207+
imports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'TreeGridSummaryExportComponent', 'IgxIconModule', 'IgxExcelExporterService'],
1208+
ngDeclarations: ['TreeGridSummaryExportComponent'],
1209+
ngImports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'IgxIconModule', 'IgxExcelExporterService'],
1210+
ngProviders: ['IgxExcelExporterService']
1211+
}),
1212+
component: 'TreeGridSummaryExportComponent',
1213+
shortenComponentPathBy: '/tree-grid/'
1214+
}));
1215+
12041216
return configs;
12051217
}
12061218
}

‎src/app/grid/grid-routes-data.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,5 +122,6 @@ export const gridsRoutesData = {
122122
'grid-validator-service': { displayName: 'Grid Validator Service', parentName: 'Grid' },
123123
'grid-cross-field-validator-service': { displayName: 'Grid Cross Field Validator Service ', parentName: 'Grid' },
124124
'grid-validation-style': { displayName: 'Grid with Validation Styles', parentName: 'Grid' },
125-
'grid-validator-service-extended': { displayName: 'Grid Validator Service Extended', parentName: 'Grid'}
125+
'grid-validator-service-extended': { displayName: 'Grid Validator Service Extended', parentName: 'Grid'},
126+
'grid-summary-export': { displayName: 'Grid Summary Export', parentName: 'Grid'}
126127
};

‎src/app/grid/grid-summary-export/grid-summary-export.component.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<div class="grid__wrapper">
2+
<div class="button-container">
3+
<button igxButton="raised" (click)="exportButtonHandler()">Export To Excel</button>
4+
Press the button to export the Grid as a .xlsx file.
5+
</div>
6+
7+
<igx-grid [igxPreventDocumentScroll]="true" #grid [data]="data" [autoGenerate]="false" height="650px" width="100%">
8+
<igx-column #col field="ProductID" header="Product ID" [headerClasses]="'prodId'">
9+
</igx-column>
10+
<igx-column #col field="ProductName" header="Product Name" [headerClasses]="'prodId'" [hasSummary]="true">
11+
<ng-template igxCell let-cell="cell" let-val>
12+
{{val}}
13+
</ng-template>
14+
<ng-template igxHeader let-col>
15+
<div class="header-text">{{col.field}}</div>
16+
<igx-icon class="header-icon" style.color="{{ col.hasSummary ? '#e41c77' : '' }}" (click)="toggleSummary(col)">functions</igx-icon>
17+
</ng-template>
18+
</igx-column>
19+
<igx-column #col field="UnitPrice" header="Price" [filterable]="false" [editable]="true" dataType="number"
20+
[hasSummary]="true">
21+
<ng-template igxCell let-cell="cell" let-val let-row>
22+
${{val}}
23+
</ng-template>
24+
<ng-template igxHeader let-col>
25+
<div class="header-text">{{col.field}}</div>
26+
<igx-icon class="header-icon" style.color="{{ col.hasSummary ? '#e41c77' : '' }}" (click)="toggleSummary(col)">functions</igx-icon>
27+
</ng-template>
28+
</igx-column>
29+
<igx-column #col field="UnitsInStock" header="Units In Stock" dataType="number" [editable]="true"
30+
[hasSummary]="false" [summaries]="mySummary">
31+
<ng-template igxCell let-cell="cell" let-val let-row>
32+
{{val}}
33+
</ng-template>
34+
<ng-template igxHeader let-col>
35+
<div class="header-text">{{col.field}}</div>
36+
<igx-icon class="header-icon" style.color="{{ col.hasSummary ? '#e41c77' : '' }}" (click)="toggleSummary(col)">functions</igx-icon>
37+
</ng-template>
38+
</igx-column>
39+
<igx-column #col field="Discontinued" header="Discontinued" [hasSummary]="true" [dataType]="'boolean'">
40+
<ng-template igxCell let-cell="cell" let-val>
41+
<img *ngIf="val" src="assets/images/grid/active.png" title="Continued" alt="Continued" />
42+
<img *ngIf="!val" src="assets/images/grid/expired.png" title="Discontinued" alt="Discontinued" />
43+
</ng-template>
44+
<ng-template igxHeader let-col>
45+
<div class="header-text">{{col.field}}</div>
46+
<igx-icon class="header-icon" style.color="{{ col.hasSummary ? '#e41c77' : '' }}" (click)="toggleSummary(col)">functions</igx-icon>
47+
</ng-template>
48+
</igx-column>
49+
<igx-column #col field="OrderDate" [dataType]="'date'" [hasSummary]="true">
50+
<ng-template igxCell let-cell="cell" let-val let-row>
51+
{{ val | date: 'MMM d, yyyy' }}
52+
</ng-template>
53+
<ng-template igxHeader let-col>
54+
<div class="header-text">{{col.field}}</div>
55+
<igx-icon class="header-icon" style.color="{{ col.hasSummary ? '#e41c77' : '' }}" (click)="toggleSummary(col)">functions</igx-icon>
56+
</ng-template>
57+
</igx-column>
58+
</igx-grid>
59+
</div>

‎src/app/grid/grid-summary-export/grid-summary-export.component.scss‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
.grid-controls {
2+
display: flex;
3+
flex-flow: column nowrap;
4+
justify-content: space-between;
5+
margin: 0 16px 24px;
6+
7+
igx-switch {
8+
margin-top: 24px;
9+
}
10+
11+
}
12+
13+
.grid__wrapper {
14+
margin: 0 auto;
15+
padding: 16px;
16+
}
17+
18+
.header {
19+
height: 100%;
20+
}
21+
22+
:host ::ng-deep{
23+
.igx-grid__th .title{
24+
width: 100%;
25+
cursor: auto;
26+
}
27+
28+
@media screen and (max-width: 677px){
29+
30+
.header-icon {
31+
padding-bottom: 17px;
32+
padding-top: 17px;
33+
font-size: 1.4em;
34+
width: 1.1em;
35+
height: 1.1em;
36+
float: right;
37+
}
38+
.header-text {
39+
float:left;
40+
white-space: nowrap;
41+
overflow: hidden;
42+
text-overflow: ellipsis;
43+
width: 50%;
44+
}
45+
}
46+
47+
48+
@media screen and (min-width: 677px){
49+
50+
.header-icon {
51+
padding-top: 17px;
52+
font-size: 1.4em;
53+
width: 1.1em;
54+
height: 1.1em;
55+
float: right;
56+
}
57+
58+
.header-text {
59+
float:left;
60+
white-space: nowrap;
61+
overflow: hidden;
62+
text-overflow: ellipsis;
63+
width: 50%;
64+
}
65+
}
66+
67+
68+
@media screen and (min-width: 992px){
69+
70+
.header-icon {
71+
padding-top: 17px;
72+
font-size: 1.4em;
73+
width: 1.1em;
74+
height: 1.1em;
75+
float: right;
76+
margin-right: 10px;
77+
cursor: pointer;
78+
}
79+
80+
.header-text {
81+
float:left;
82+
white-space: nowrap;
83+
width: 50%;
84+
cursor: auto;
85+
}
86+
}
87+
}
88+
89+
.button-container {
90+
margin: 25px auto;
91+
}

‎src/app/grid/grid-summary-export/grid-summary-export.component.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { Component, ViewChild } from '@angular/core';
2+
import {
3+
ColumnType,
4+
IgxExcelExporterOptions,
5+
IgxExcelExporterService,
6+
IgxGridComponent,
7+
IgxNumberSummaryOperand,
8+
IgxSummaryResult } from 'igniteui-angular';
9+
import { DATA } from '../../data/nwindData';
10+
11+
class MySummary {
12+
13+
public operate(data?: any[]): IgxSummaryResult[] {
14+
const result = new IgxNumberSummaryOperand().operate(data);
15+
result.push({
16+
key: 'test',
17+
label: 'Test',
18+
summaryResult: data.filter((rec) => rec > 10 && rec < 30).length
19+
});
20+
21+
return result;
22+
}
23+
}
24+
@Component({
25+
selector: 'app-grid-summary-export',
26+
styleUrls: ['./grid-summary-export.component.scss'],
27+
templateUrl: './grid-summary-export.component.html'
28+
})
29+
export class GridSummaryExportComponent {
30+
@ViewChild('grid', { read: IgxGridComponent, static: true })
31+
public grid: IgxGridComponent;
32+
33+
public mySummary = MySummary;
34+
public data;
35+
public productId = 0;
36+
37+
constructor(private excelExportService: IgxExcelExporterService) {
38+
this.data = DATA;
39+
this.productId = DATA.length;
40+
}
41+
42+
public toggleSummary(column: ColumnType) {
43+
column.hasSummary = !column.hasSummary;
44+
}
45+
46+
public exportButtonHandler() {
47+
this.excelExportService.export(this.grid, new IgxExcelExporterOptions('ExportedFile'));
48+
}
49+
}

‎src/app/grid/grids-routing.module.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@ import { GridValidatorServiceComponent } from './grid-validator-service/grid-val
128128
import { GridValidatorServiceCrossFieldComponent } from './grid-validator-service-cross-field/grid-validator-service-cross-field.component';
129129
import { GridValidationStyleComponent } from './grid-validation-style/grid-validation-style.component';
130130
import { GridValidatorServiceExtendedComponent } from './grid-validator-service-extended/grid-validator-service-extended.component';
131+
import { GridSummaryExportComponent } from './grid-summary-export/grid-summary-export.component';
131132
// tslint:enable:max-line-length
132133

133134
export const gridsRoutes: Routes = [
@@ -740,6 +741,11 @@ export const gridsRoutes: Routes = [
740741
component: GridValidatorServiceExtendedComponent,
741742
data: gridsRoutesData['grid-validator-service-extended'],
742743
path: 'grid-validator-service-extended'
744+
},
745+
{
746+
component: GridSummaryExportComponent,
747+
data: gridsRoutesData['grid-summary-export'],
748+
path: 'grid-summary-export'
743749
}
744750
];
745751

‎src/app/grid/grids.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@ import { GridValidatorServiceComponent } from './grid-validator-service/grid-val
137137
import { GridValidatorServiceCrossFieldComponent } from './grid-validator-service-cross-field/grid-validator-service-cross-field.component';
138138
import { GridValidationStyleComponent } from './grid-validation-style/grid-validation-style.component';
139139
import { GridValidatorServiceExtendedComponent, PhoneFormatDirective } from './grid-validator-service-extended/grid-validator-service-extended.component';
140+
import { GridSummaryExportComponent } from './grid-summary-export/grid-summary-export.component';
140141

141142
@NgModule({
142143
declarations: [
@@ -264,7 +265,8 @@ import { GridValidatorServiceExtendedComponent, PhoneFormatDirective } from './g
264265
GridValidatorServiceCrossFieldComponent,
265266
GridValidationStyleComponent,
266267
GridValidatorServiceExtendedComponent,
267-
PhoneFormatDirective
268+
PhoneFormatDirective,
269+
GridSummaryExportComponent
268270
],
269271
imports: [
270272
CommonModule,

‎src/app/hierarchical-grid/hgrid-summary-export/hgrid-summary-export.component.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<div class="hgrid-sample">
2+
<div class="button-container">
3+
<button igxButton="raised" (click)="exportButtonHandler()">Export To Excel</button>
4+
Press the button to export the Grid as a .xlsx file.
5+
</div>
6+
7+
<igx-hierarchical-grid [igxPreventDocumentScroll]="true" class="hgrid" [data]="data" [autoGenerate]="false"
8+
[height]="'650px'" [width]="'100%'" [rowHeight]="'65px'" #hGrid>
9+
<igx-column field="Artist" [hasSummary]='true'></igx-column>
10+
<igx-column field="Photo">
11+
<ng-template igxCell let-cell="cell">
12+
<div class="cell__inner_2">
13+
<img [src]="cell.value" class="photo" />
14+
</div>
15+
</ng-template>
16+
</igx-column>
17+
<igx-column field="Debut" [hasSummary]='true'></igx-column>
18+
<igx-column field="GrammyNominations" header="Grammy Nominations" [hasSummary]='true' dataType="number" [summaries]="mySummary"></igx-column>
19+
<igx-column field="GrammyAwards" header="Grammy Awards" [hasSummary]='true' [summaries]="mySummary" dataType="number"></igx-column>
20+
21+
<igx-row-island [height]="null" [key]="'Albums'" [autoGenerate]="false">
22+
<igx-column field="Album"></igx-column>
23+
<igx-column field="LaunchDate" header="Launch Date" [dataType]="'date'"></igx-column>
24+
<igx-column field="BillboardReview" header="Billboard Review" [hasSummary]='true' dataType="number" [summaries]="mySummary"></igx-column>
25+
<igx-column field="USBillboard200" header="US Billboard 200" [hasSummary]='true' dataType="number" [summaries]="mySummary"></igx-column>
26+
<igx-row-island [height]="null" [key]="'Songs'" [autoGenerate]="false" >
27+
<igx-column field="Number" header="No."></igx-column>
28+
<igx-column field="Title" [hasSummary]='true' [summaries]="myChildSummary"></igx-column>
29+
<igx-column field="Released" dataType="date"></igx-column>
30+
<igx-column field="Genre"></igx-column>
31+
</igx-row-island>
32+
</igx-row-island>
33+
34+
<igx-row-island [height]="null" [key]="'Tours'" [autoGenerate]="false">
35+
<igx-column field="Tour"></igx-column>
36+
<igx-column field="StartedOn" header="Started on"></igx-column>
37+
<igx-column field="Location"></igx-column>
38+
<igx-column field="Headliner"></igx-column>
39+
</igx-row-island>
40+
41+
</igx-hierarchical-grid>
42+
</div>

0 commit comments

Comments
 (0)