Skip to content

Commit 1e31c7e

Browse files
Sridhar-KarunakaranSridhar-Karunakaran
committed
Updating the samples
1 parent 0661abb commit 1e31c7e

File tree

43 files changed

+362
-500
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+362
-500
lines changed

‎src/app/add-header-and-footer/add-header-and-footer.component.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import { Component, OnInit, ViewChild } from '@angular/core';
2-
import { IDataOptions, IDataSet, PivotView } from '@syncfusion/ej2-angular-pivotview';
2+
import { IDataOptions, IDataSet, PivotView, PDFExportService } from '@syncfusion/ej2-angular-pivotview';
33
import { Button } from '@syncfusion/ej2-buttons';
44
import { PdfExportProperties } from '@syncfusion/ej2-grids';
55
import { pivot_Data } from '../data';
66

77
@Component({
88
selector: 'app-container',
9+
providers: [PDFExportService],
910
templateUrl: `./add-header-and-footer.component.html`
1011
})
1112
export class AddHeaderAndFooterComponent implements OnInit {
@@ -44,15 +45,20 @@ export class AddHeaderAndFooterComponent implements OnInit {
4445
{
4546
type: 'Text',
4647
value: "Pivot Table",
47-
position: { x: 0, y: 50 },
48-
style: { textBrushColor: '#000000', fontSize: 13, dashStyle:'Solid',hAlign:'Center' }
48+
position: { x: 300, y: 50 },
49+
style: { textBrushColor: '#000080', fontSize: 22, dashStyle:'Solid',hAlign:'Center' }
4950
}
5051
]
5152
},
5253
footer: {
5354
fromBottom: 160,
5455
height: 150,
5556
contents: [
57+
{
58+
type: 'Line',
59+
style: { penColor: '#000080', penSize: 1, dashStyle: 'Solid' },
60+
points: { x1: 0, y1: 4, x2: 685, y2: 4 },
61+
},
5662
{
5763
type: 'PageNumber',
5864
pageNumberType: 'Arabic',

‎src/app/adding-custom-font/adding-custom-font.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<h4>Add custom font</h4>
22
<div class="col-md-2"><button ej-button id='export'>Export</button></div>
33
<div class="col-md-8">
4-
<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings allowPdfExport='true'
5-
width=width></ejs-pivotview>
4+
<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings allowPdfExport='true' width=width (load)='load()'
5+
[gridSettings]='gridSettings' (onPdfCellRender)='onPdfCellRender($event)' (beforeExport)='beforeExport($event)'></ejs-pivotview>
66
</div>

‎src/app/adding-custom-font/adding-custom-font.component.ts‎

Lines changed: 125 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,142 @@
11
import { Component, OnInit, ViewChild } from '@angular/core';
2-
import { IDataOptions, IDataSet, PivotView } from '@syncfusion/ej2-angular-pivotview';
2+
import { IDataOptions, IDataSet, PivotView, PDFExportService, IAxisSet, BeforeExportEventArgs } from '@syncfusion/ej2-angular-pivotview';
3+
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
34
import { Button } from '@syncfusion/ej2-buttons';
45
import { PdfExportProperties } from '@syncfusion/ej2-grids';
5-
import { PdfTrueTypeFont } from '@syncfusion/ej2-pdf-export';
6+
import { PdfTrueTypeFont, PdfStandardFont, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf-export';
67
import { pivot_Data, base64AlgeriaFont } from '../data';
8+
import { Observable } from 'rxjs';
79

810
@Component({
911
selector: 'app-container',
12+
providers: [PDFExportService],
1013
templateUrl: `./adding-custom-font.component.html`
1114
})
1215
export class AddingCustomFontComponent implements OnInit {
1316
public width: string;
1417
public dataSourceSettings: IDataOptions;
18+
public gridSettings?: GridSettings;
1519
public button: Button;
1620
public pdfExportProperties: PdfExportProperties;
21+
public observable = new Observable();
1722

18-
@ViewChild('pivotview', {static: false})
19-
public pivotGridObj: PivotView;
20-
21-
ngOnInit(): void {
22-
23-
this.width = "100%";
24-
25-
this.dataSourceSettings = {
26-
dataSource: pivot_Data as IDataSet[],
27-
columns: [{ name: 'Year', caption: 'Production Year' }],
28-
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
29-
rows: [{ name: 'Country' }, { name: 'Products' }],
30-
formatSettings: [{ name: 'Amount', format: 'C0' }],
31-
filters: [],
32-
};
33-
34-
this.button = new Button({ isPrimary: true });
35-
this.button.appendTo('#export');
36-
37-
this.button.element.onclick = (): void => {
38-
this.pdfExportProperties = {
39-
theme: {
40-
header: {font: new PdfTrueTypeFont(base64AlgeriaFont, 11) },
41-
caption: { font: new PdfTrueTypeFont(base64AlgeriaFont, 9) },
42-
record: { font: new PdfTrueTypeFont(base64AlgeriaFont, 10) }
43-
}
44-
};
45-
this.pivotGridObj.pdfExport(this.pdfExportProperties);
46-
};
23+
@ViewChild('pivotview', { static: false })
24+
public pivotGridObj: PivotView;
25+
26+
onPdfCellRender(args: any) {
27+
if ((args.pivotCell as IAxisSet).axis === 'value' && (args.pivotCell as IAxisSet).isGrandSum !== true) {
28+
args.style = { textBrushColor: '#000000' };
29+
}
30+
31+
// The width of the pivot table row header can be changed here.
32+
if (args.pivotCell && args.pivotCell.axis == 'row') {
33+
args.column.width = (this.pivotGridObj.gridSettings.columnWidth as number) * 0.5;
4734
}
35+
// The width of the pivot table column can be changed here.
36+
args.column.width = (this.pivotGridObj.gridSettings.columnWidth as number) * 0.6;
37+
// The height of the pivot table row can be changed here.
38+
args.cell.height = this.pivotGridObj.gridSettings.rowHeight;
39+
}
40+
41+
beforeExport(args: BeforeExportEventArgs) {
42+
args.width = 900;
43+
}
44+
45+
load() {
46+
this.pivotGridObj.allowEngineExport = true;
47+
}
48+
49+
ngOnInit(): void {
50+
51+
this.width = "100%";
52+
53+
this.dataSourceSettings = {
54+
dataSource: pivot_Data as IDataSet[],
55+
columns: [{ name: 'Year', caption: 'Production Year' }],
56+
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
57+
rows: [{ name: 'Country' }, { name: 'Products' }],
58+
formatSettings: [{ name: 'Amount', format: 'C0' }],
59+
filters: [],
60+
};
61+
62+
this.gridSettings = {
63+
pdfQueryCellInfo: this.observable.subscribe((args: any) => {
64+
if ((args.data as IAxisSet).axis === 'row') {
65+
if ((args.data as IAxisSet).type === 'grand sum') {
66+
args.style = { backgroundColor: '#e8e2d2' };
67+
} else {
68+
args.style = { backgroundColor: '#e8e2d2' };
69+
}
70+
} else if ((args.data as IAxisSet).axis === 'value' && (args.data as IAxisSet).isGrandSum == true) {
71+
args.style = { backgroundColor: '#e8e2d2' };
72+
}
73+
}) as any,
74+
pdfHeaderQueryCellInfo: this.observable.subscribe((args: any) => {
75+
if ((args.gridCell as IAxisSet).axis === 'column') {
76+
if ((args.gridCell as IAxisSet).type === 'grand sum') {
77+
args.style = { backgroundColor: '#e8f4d2' };
78+
} else {
79+
args.style = { backgroundColor: '#e8e2d2' };
80+
}
81+
}
82+
}) as any
83+
} as GridSettings;
84+
85+
this.button = new Button({ isPrimary: true });
86+
this.button.appendTo('#export');
87+
88+
this.button.element.onclick = (): void => {
89+
this.pdfExportProperties = {
90+
theme: {
91+
header: {
92+
font: new PdfStandardFont(
93+
PdfFontFamily.TimesRoman,
94+
11,
95+
PdfFontStyle.Bold
96+
),
97+
fontColor: '#000080',
98+
bold: true,
99+
border: { color: '#5A5A5A', dashStyle: 'Solid' },
100+
},
101+
record: {
102+
font: new PdfTrueTypeFont(base64AlgeriaFont, 10),
103+
fontColor: '#B22222',
104+
bold: true,
105+
},
106+
},
107+
header: {
108+
fromTop: 0,
109+
height: 300,
110+
contents: [
111+
{
112+
type: 'Text',
113+
value: "Product Sales Report",
114+
position: { x: 300, y: 0 },
115+
size: { width: 100, height: 100 },
116+
style: { textBrushColor: '#000080', fontSize: 32, dashStyle: 'Solid', hAlign: 'Center' }
117+
}
118+
]
119+
},
120+
footer: {
121+
fromBottom: 160,
122+
height: 150,
123+
contents: [
124+
{
125+
type: 'Line',
126+
style: { textBrushColor: '#000080', penSize: 1, dashStyle: 'Solid' },
127+
points: { x1: 0, y1: 4, x2: 685, y2: 4 }
128+
},
129+
{
130+
type: 'PageNumber',
131+
pageNumberType: 'Arabic',
132+
format: 'Page {$current} of {$total}',
133+
position: { x: 0, y: 25 },
134+
style: { textBrushColor: '#02007a', fontSize: 15 }
135+
}
136+
]
137+
}
138+
};
139+
this.pivotGridObj.pdfExport(this.pdfExportProperties);
140+
};
141+
}
48142
}

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

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,8 @@ import { CustomizeColumnCountComponent } from './customize-column-count/customiz
1212
import { ExportBlobDataComponent } from './export-blob-data/export-blob-data.component';
1313
import { MultipleExportingComponent } from './multiple-exporting/multiple-exporting.component';
1414
import { ChangePageSizeComponent } from './change-page-size/change-page-size.component';
15-
import { ChangeColumnWidthComponent } from './change-column-width/change-column-width.component';
15+
import { ChangeTableColumnWidthAndRowHeightComponent } from './change-column-width-and-row-height/change-column-width-and-row-height.component';
1616
import { ChangePivotTableStyleComponent } from './change-pivot-table-style/change-pivot-table-style.component';
17-
import { ChangeRowHeightComponent } from './change-row-height/change-row-height.component';
18-
import { RepeatRowHeadersComponent } from './repeat-row-headers/repeat-row-headers.component';
1917

2018
const routes: Routes = [
2119
{
@@ -67,21 +65,17 @@ const routes: Routes = [
6765
path:'changePageSize'
6866
},
6967
{
70-
component:ChangeColumnWidthComponent,
71-
path:'changeColumnWidth'
68+
component:ChangeTableColumnWidthAndRowHeightComponent,
69+
path:'changeTableColumnWidthAndRowHeight'
7270
},
7371
{
7472
component:ChangePivotTableStyleComponent,
7573
path:'changePivotTableStyle'
7674
},
7775
{
78-
component:ChangeRowHeightComponent,
79-
path:'changeRowHeight'
76+
component:ExportBlobDataComponent,
77+
path:'blobData'
8078
},
81-
{
82-
component:RepeatRowHeadersComponent,
83-
path:'repeatRowHeaders'
84-
}
8579
];
8680

8781

‎src/app/app.component.html‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,17 +27,11 @@ <h1>Exporting customization</h1>
2727
<a routerLink="customizeColumnCount">customize column count</a>
2828
</li>
2929
<li>
30-
<a routerLink="changeColumnWidth">change column width</a>
31-
</li>
32-
<li>
33-
<a routerLink="changeRowHeight">change row height</a>
30+
<a routerLink="changeTableColumnWidthAndRowHeight">ChangeTableColumnWidthAndRowHeight</a>
3431
</li>
3532
<li>
3633
<a routerLink="changePivotTableStyle">change pivot table style</a>
3734
</li>
38-
<li>
39-
<a routerLink="repeatRowHeaders">repeat rowHeaders</a>
40-
</li>
4135
<li>
4236
<a routerLink="exportAllPages">Export all pages</a>
4337
</li>
@@ -47,6 +41,9 @@ <h1>Exporting customization</h1>
4741
<li>
4842
<a routerLink="multipleExport">Multiple export</a>
4943
</li>
44+
<li>
45+
<a routerLink="blobData">Blob data</a>
46+
</li>
5047

5148
</ul>
5249
<router-outlet></router-outlet>

‎src/app/app.module.ts‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,8 @@ import { MultipleExportingComponent } from './multiple-exporting/multiple-export
1616
import { ExportBlobDataComponent } from './export-blob-data/export-blob-data.component';
1717
import { ExportAllPagesComponent } from './export-all-pages/export-all-pages.component';
1818
import { ChangePageSizeComponent } from './change-page-size/change-page-size.component';
19-
import { ChangeColumnWidthComponent } from './change-column-width/change-column-width.component';
19+
import { ChangeTableColumnWidthAndRowHeightComponent } from './change-column-width-and-row-height/change-column-width-and-row-height.component';
2020
import { ChangePivotTableStyleComponent } from './change-pivot-table-style/change-pivot-table-style.component';
21-
import { ChangeRowHeightComponent } from './change-row-height/change-row-height.component';
22-
import { RepeatRowHeadersComponent } from './repeat-row-headers/repeat-row-headers.component';
2321

2422
/**
2523
* Module
@@ -35,8 +33,7 @@ import { RepeatRowHeadersComponent } from './repeat-row-headers/repeat-row-heade
3533
declarations: [AppComponent, TableExportingComponent, TableAndChartExportComponent, AddHeaderAndFooterComponent,
3634
ChangePageOrientationComponent, ChangeDocumentWidthAndHeightComponent, CustomizeColumnCountComponent,
3735
AddingCustomFontComponent, MultipleExportingComponent, ExportBlobDataComponent, ExportAllPagesComponent,
38-
ChangePageSizeComponent, ChangeFilenameComponent, ChangeColumnWidthComponent, ChangePivotTableStyleComponent,
39-
ChangeRowHeightComponent, RepeatRowHeadersComponent
36+
ChangePageSizeComponent, ChangeFilenameComponent, ChangeTableColumnWidthAndRowHeightComponent, ChangePivotTableStyleComponent
4037
],
4138
bootstrap: [AppComponent]
4239
})

‎src/app/change-column-width/change-column-width.component.css‎ renamed to ‎src/app/change-column-width-and-row-height/change-column-width-and-row-height.component.css‎

File renamed without changes.

‎src/app/change-column-width/change-column-width.component.html‎ renamed to ‎src/app/change-column-width-and-row-height/change-column-width-and-row-height.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<h4>Change column width</h4>
1+
<h4>Change column width and row height</h4>
22
<div class="col-md-2"><button ej-button id='export'>Export</button></div>
33
<div class="col-md-8">
44
<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings allowPdfExport='true'
5-
enableVirtualization='true' (onPdfCellRender)='onPdfCellRender($event)' width=width></ejs-pivotview>
5+
(onPdfCellRender)='onPdfCellRender($event)' (beforeExport)='beforeExport($event)' (load)='load()' width=width></ejs-pivotview>
66
</div>

‎src/app/change-column-width-and-row-height/change-column-width-and-row-height.component.spec.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { ChangeTableColumnWidthAndRowHeightComponent } from './change-column-width-and-row-height.component';
4+
5+
describe('CustomizeColumnCountComponent', () => {
6+
let component: ChangeTableColumnWidthAndRowHeightComponent;
7+
let fixture: ComponentFixture<ChangeTableColumnWidthAndRowHeightComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [ ChangeTableColumnWidthAndRowHeightComponent ]
12+
})
13+
.compileComponents();
14+
15+
fixture = TestBed.createComponent(ChangeTableColumnWidthAndRowHeightComponent);
16+
component = fixture.componentInstance;
17+
fixture.detectChanges();
18+
});
19+
20+
it('should create', () => {
21+
expect(component).toBeTruthy();
22+
});
23+
});

0 commit comments

Comments
 (0)