Skip to content

Commit b6a4741

Browse files
Copilotkdinev
Copilot
and
kdinev
committed
Add PDF export demo component with configuration UI
Created a comprehensive demo showing IgxPdfExporterService API usage: - Interactive configuration panel for all export options - Examples with regular grid, tree grid, and hierarchical grid - Direct service API usage (not through toolbar UI) - Live configuration of orientation, page size, borders, and font size - Located at /gridPdfExport route Co-authored-by: kdinev <[email protected]>
1 parent fea4fa0 commit b6a4741

File tree

4 files changed

+387
-0
lines changed

4 files changed

+387
-0
lines changed

‎src/app/app.routes.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,7 @@ import { QueryBuilderComponent } from './query-builder/query-builder.sample';
141141
import { PivotGridStateSampleComponent } from './pivot-grid-state/pivot-grid-state.sample';
142142
import { GridValidationSampleComponent } from './grid-validation/grid-validation.sample.component';
143143
import { GridExportComponent } from './grid-export/grid-export.sample';
144+
import { GridPdfExportSampleComponent } from './grid-pdf-export/grid-pdf-export.sample';
144145
import { DividerComponent } from './divider/divider.component';
145146
import { MonthPickerSampleComponent } from './month-picker/month-picker.sample';
146147
import { GridDockManagerSampleComponent } from './dockmanager-grid/dockmanager-grid.sample';
@@ -532,6 +533,10 @@ export const appRoutes: Routes = [
532533
path: 'gridExport',
533534
component: GridExportComponent
534535
},
536+
{
537+
path: 'gridPdfExport',
538+
component: GridPdfExportSampleComponent
539+
},
535540
{
536541
path: 'buttonGroup',
537542
component: ButtonGroupSampleComponent

‎src/app/grid-pdf-export/grid-pdf-export.sample.html‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<div class="sample-wrapper">
2+
<h2 class="sample-title">PDF Export Service Demo</h2>
3+
<p class="sample-description">
4+
This demo shows how to use the IgxPdfExporterService API directly to export grids to PDF format.
5+
Configure the export options using the controls below and click the export buttons.
6+
</p>
7+
8+
<!-- Export Configuration Panel -->
9+
<div class="config-panel">
10+
<h3>Export Options Configuration</h3>
11+
12+
<div class="config-row">
13+
<igx-input-group>
14+
<label igxLabel>File Name</label>
15+
<input igxInput type="text" [(ngModel)]="fileName" />
16+
</igx-input-group>
17+
</div>
18+
19+
<div class="config-row">
20+
<igx-input-group>
21+
<label igxLabel>Page Orientation</label>
22+
<igx-select [(ngModel)]="pageOrientation">
23+
<igx-select-item value="portrait">Portrait</igx-select-item>
24+
<igx-select-item value="landscape">Landscape</igx-select-item>
25+
</igx-select>
26+
</igx-input-group>
27+
</div>
28+
29+
<div class="config-row">
30+
<igx-input-group>
31+
<label igxLabel>Page Size</label>
32+
<igx-select [(ngModel)]="pageSize">
33+
@for (size of pageSizes; track size) {
34+
<igx-select-item [value]="size">{{ size.toUpperCase() }}</igx-select-item>
35+
}
36+
</igx-select>
37+
</igx-input-group>
38+
</div>
39+
40+
<div class="config-row">
41+
<igx-input-group>
42+
<label igxLabel>Font Size</label>
43+
<input igxInput type="number" [(ngModel)]="fontSize" min="8" max="16" />
44+
</igx-input-group>
45+
</div>
46+
47+
<div class="config-row">
48+
<igx-switch [(ngModel)]="showTableBorders">Show Table Borders</igx-switch>
49+
</div>
50+
</div>
51+
52+
<!-- Regular Grid -->
53+
<div class="grid-container">
54+
<div class="grid-header">
55+
<h3>Regular Grid</h3>
56+
<button igxButton="contained" (click)="exportGrid()">
57+
Export to PDF
58+
</button>
59+
</div>
60+
61+
<igx-grid #grid1 [data]="gridData" [autoGenerate]="false" height="400px" width="100%">
62+
<igx-column field="ID" header="ID" [width]="'80px'"></igx-column>
63+
<igx-column field="Name" header="Product Name" [width]="'200px'"></igx-column>
64+
<igx-column field="Category" header="Category" [width]="'150px'"></igx-column>
65+
<igx-column field="Price" header="Price" dataType="currency" [width]="'120px'"></igx-column>
66+
<igx-column field="InStock" header="In Stock" dataType="boolean" [width]="'100px'"></igx-column>
67+
<igx-column field="LaunchDate" header="Launch Date" dataType="date" [width]="'150px'"></igx-column>
68+
</igx-grid>
69+
</div>
70+
71+
<!-- Tree Grid -->
72+
<div class="grid-container">
73+
<div class="grid-header">
74+
<h3>Tree Grid (with Hierarchy)</h3>
75+
<button igxButton="contained" (click)="exportTreeGrid()">
76+
Export to PDF
77+
</button>
78+
</div>
79+
80+
<igx-tree-grid #treeGrid [data]="treeGridData" [autoGenerate]="false"
81+
primaryKey="ID" foreignKey="ParentID" height="400px" width="100%">
82+
<igx-column field="ID" header="ID" [width]="'100px'"></igx-column>
83+
<igx-column field="Name" header="Department Name" [width]="'300px'"></igx-column>
84+
<igx-column field="Budget" header="Budget" dataType="currency" [width]="'150px'"></igx-column>
85+
</igx-tree-grid>
86+
</div>
87+
88+
<!-- Hierarchical Grid -->
89+
<div class="grid-container">
90+
<div class="grid-header">
91+
<h3>Hierarchical Grid</h3>
92+
<button igxButton="contained" (click)="exportHierarchicalGrid()">
93+
Export to PDF
94+
</button>
95+
</div>
96+
97+
<igx-hierarchical-grid #hierarchicalGrid [data]="hierarchicalGridData"
98+
[autoGenerate]="false" height="400px" width="100%">
99+
<igx-column field="ID" header="ID" [width]="'80px'"></igx-column>
100+
<igx-column field="CompanyName" header="Company" [width]="'250px'"></igx-column>
101+
<igx-column field="Revenue" header="Revenue" dataType="currency" [width]="'150px'"></igx-column>
102+
103+
<igx-row-island [key]="'Employees'" [autoGenerate]="false">
104+
<igx-column field="ID" header="Employee ID" [width]="'120px'"></igx-column>
105+
<igx-column field="Name" header="Name" [width]="'200px'"></igx-column>
106+
<igx-column field="Position" header="Position" [width]="'150px'"></igx-column>
107+
<igx-column field="Salary" header="Salary" dataType="currency" [width]="'120px'"></igx-column>
108+
</igx-row-island>
109+
</igx-hierarchical-grid>
110+
</div>
111+
112+
<div class="info-section">
113+
<h4>How to Use:</h4>
114+
<ol>
115+
<li>Configure the export options using the controls at the top</li>
116+
<li>Click any of the "Export to PDF" buttons to export the corresponding grid</li>
117+
<li>The PDF will be downloaded with your configured settings</li>
118+
<li>Tree and Hierarchical grids will show indentation in the exported PDF</li>
119+
</ol>
120+
121+
<h4>Key Features:</h4>
122+
<ul>
123+
<li><strong>Direct API Usage:</strong> Uses IgxPdfExporterService.export() method directly</li>
124+
<li><strong>Configurable Options:</strong> Adjust orientation, page size, font size, and borders</li>
125+
<li><strong>Hierarchy Support:</strong> Tree and Hierarchical grids export with proper indentation</li>
126+
<li><strong>Multiple Grids:</strong> Export different grid types with the same configuration</li>
127+
</ul>
128+
</div>
129+
</div>

‎src/app/grid-pdf-export/grid-pdf-export.sample.scss‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
.sample-wrapper {
2+
padding: 20px;
3+
max-width: 1400px;
4+
margin: 0 auto;
5+
}
6+
7+
.sample-title {
8+
color: #333;
9+
margin-bottom: 10px;
10+
}
11+
12+
.sample-description {
13+
color: #666;
14+
margin-bottom: 30px;
15+
line-height: 1.6;
16+
}
17+
18+
.config-panel {
19+
background: #f5f5f5;
20+
border-radius: 8px;
21+
padding: 20px;
22+
margin-bottom: 30px;
23+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
24+
25+
h3 {
26+
margin-top: 0;
27+
margin-bottom: 20px;
28+
color: #333;
29+
}
30+
}
31+
32+
.config-row {
33+
margin-bottom: 15px;
34+
display: inline-block;
35+
margin-right: 20px;
36+
min-width: 200px;
37+
38+
igx-input-group {
39+
width: 100%;
40+
}
41+
}
42+
43+
.grid-container {
44+
margin-bottom: 40px;
45+
border: 1px solid #e0e0e0;
46+
border-radius: 8px;
47+
overflow: hidden;
48+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
49+
}
50+
51+
.grid-header {
52+
display: flex;
53+
justify-content: space-between;
54+
align-items: center;
55+
padding: 15px 20px;
56+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
57+
color: white;
58+
59+
h3 {
60+
margin: 0;
61+
font-size: 18px;
62+
}
63+
64+
button {
65+
background: white;
66+
color: #667eea;
67+
font-weight: 500;
68+
69+
&:hover {
70+
background: #f0f0f0;
71+
}
72+
}
73+
}
74+
75+
.info-section {
76+
background: #e8f4f8;
77+
border-left: 4px solid #2196F3;
78+
padding: 20px;
79+
border-radius: 4px;
80+
margin-top: 30px;
81+
82+
h4 {
83+
color: #1976D2;
84+
margin-top: 0;
85+
margin-bottom: 15px;
86+
}
87+
88+
ol, ul {
89+
line-height: 1.8;
90+
color: #555;
91+
92+
li {
93+
margin-bottom: 8px;
94+
}
95+
}
96+
97+
strong {
98+
color: #1976D2;
99+
}
100+
}
101+
102+
// Responsive design
103+
@media (max-width: 768px) {
104+
.config-row {
105+
display: block;
106+
width: 100%;
107+
margin-right: 0;
108+
min-width: unset;
109+
}
110+
111+
.grid-header {
112+
flex-direction: column;
113+
gap: 10px;
114+
align-items: flex-start;
115+
116+
button {
117+
width: 100%;
118+
}
119+
}
120+
}

0 commit comments

Comments
 (0)