Skip to content

Commit 0fcd85a

Browse files
kdinevkdinev
committed
feat(pdf exporter): updating demo component
1 parent 5cbe8c6 commit 0fcd85a

File tree

2 files changed

+66
-26
lines changed

2 files changed

+66
-26
lines changed

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

Lines changed: 37 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -48,59 +48,73 @@ <h3>Export Options Configuration</h3>
4848
<!-- Regular Grid -->
4949
<div class="grid-container">
5050
<div class="grid-header">
51-
<h3>Regular Grid</h3>
51+
<h3>Regular Grid (with Multi-Column Headers and Summaries)</h3>
5252
<button igxButton="contained" (click)="exportGrid()">
5353
Export to PDF
5454
</button>
5555
</div>
5656

57-
<igx-grid #grid1 [data]="gridData" [autoGenerate]="false" height="400px" width="100%">
58-
<igx-column field="ID" header="ID" [width]="'80px'"></igx-column>
59-
<igx-column field="Name" header="Product Name" [width]="'200px'"></igx-column>
60-
<igx-column field="Category" header="Category" [width]="'150px'"></igx-column>
61-
<igx-column field="Price" header="Price" dataType="currency" [width]="'120px'"></igx-column>
62-
<igx-column field="InStock" header="In Stock" dataType="boolean" [width]="'100px'"></igx-column>
57+
<igx-grid #grid1 [data]="gridData" [autoGenerate]="false" height="500px" width="100%">
58+
<igx-column field="ID" header="ID" [width]="'80px'" [hasSummary]="true"></igx-column>
59+
60+
<igx-column-group header="Product Information">
61+
<igx-column field="Name" header="Product Name" [width]="'200px'"></igx-column>
62+
<igx-column field="Category" header="Category" [width]="'150px'"></igx-column>
63+
</igx-column-group>
64+
65+
<igx-column-group header="Financial Details">
66+
<igx-column field="Price" header="Price" dataType="currency" [width]="'120px'" [hasSummary]="true"></igx-column>
67+
<igx-column field="InStock" header="In Stock" dataType="boolean" [width]="'100px'" [hasSummary]="true"></igx-column>
68+
</igx-column-group>
69+
6370
<igx-column field="LaunchDate" header="Launch Date" dataType="date" [width]="'150px'"></igx-column>
6471
</igx-grid>
6572
</div>
6673

6774
<!-- Tree Grid -->
6875
<div class="grid-container">
6976
<div class="grid-header">
70-
<h3>Tree Grid (with Hierarchy)</h3>
77+
<h3>Tree Grid (with Hierarchy and Summaries)</h3>
7178
<button igxButton="contained" (click)="exportTreeGrid()">
7279
Export to PDF
7380
</button>
7481
</div>
7582

7683
<igx-tree-grid #treeGrid [data]="treeGridData" [autoGenerate]="false"
77-
primaryKey="ID" foreignKey="ParentID" height="400px" width="100%">
78-
<igx-column field="ID" header="ID" [width]="'100px'"></igx-column>
84+
primaryKey="ID" foreignKey="ParentID" height="500px" width="100%">
85+
<igx-column field="ID" header="ID" [width]="'100px'" [hasSummary]="true"></igx-column>
7986
<igx-column field="Name" header="Department Name" [width]="'300px'"></igx-column>
80-
<igx-column field="Budget" header="Budget" dataType="currency" [width]="'150px'"></igx-column>
87+
<igx-column field="Budget" header="Budget" dataType="currency" [width]="'150px'" [hasSummary]="true"></igx-column>
8188
</igx-tree-grid>
8289
</div>
8390

8491
<!-- Hierarchical Grid -->
8592
<div class="grid-container">
8693
<div class="grid-header">
87-
<h3>Hierarchical Grid</h3>
94+
<h3>Hierarchical Grid (with Multi-Column Headers and Summaries)</h3>
8895
<button igxButton="contained" (click)="exportHierarchicalGrid()">
8996
Export to PDF
9097
</button>
9198
</div>
9299

93100
<igx-hierarchical-grid #hierarchicalGrid [data]="hierarchicalGridData"
94-
[autoGenerate]="false" height="400px" width="100%">
95-
<igx-column field="ID" header="ID" [width]="'80px'"></igx-column>
96-
<igx-column field="CompanyName" header="Company" [width]="'250px'"></igx-column>
97-
<igx-column field="Revenue" header="Revenue" dataType="currency" [width]="'150px'"></igx-column>
101+
[autoGenerate]="false" height="500px" width="100%">
102+
<igx-column field="ID" header="ID" [width]="'80px'" [hasSummary]="true"></igx-column>
103+
104+
<igx-column-group header="Company Details">
105+
<igx-column field="CompanyName" header="Company" [width]="'250px'"></igx-column>
106+
<igx-column field="Revenue" header="Revenue" dataType="currency" [width]="'150px'" [hasSummary]="true"></igx-column>
107+
</igx-column-group>
98108

99109
<igx-row-island [key]="'Employees'" [autoGenerate]="false">
100-
<igx-column field="ID" header="Employee ID" [width]="'120px'"></igx-column>
101-
<igx-column field="Name" header="Name" [width]="'200px'"></igx-column>
102-
<igx-column field="Position" header="Position" [width]="'150px'"></igx-column>
103-
<igx-column field="Salary" header="Salary" dataType="currency" [width]="'120px'"></igx-column>
110+
<igx-column field="ID" header="Employee ID" [width]="'120px'" [hasSummary]="true"></igx-column>
111+
112+
<igx-column-group header="Employee Info">
113+
<igx-column field="Name" header="Name" [width]="'200px'"></igx-column>
114+
<igx-column field="Position" header="Position" [width]="'150px'"></igx-column>
115+
</igx-column-group>
116+
117+
<igx-column field="Salary" header="Salary" dataType="currency" [width]="'120px'" [hasSummary]="true"></igx-column>
104118
</igx-row-island>
105119
</igx-hierarchical-grid>
106120
</div>
@@ -112,13 +126,16 @@ <h4>How to Use:</h4>
112126
<li>Click any of the "Export to PDF" buttons to export the corresponding grid</li>
113127
<li>The PDF will be downloaded with your configured settings</li>
114128
<li>Tree and Hierarchical grids will show indentation in the exported PDF</li>
129+
<li>Multi-column headers and summaries are automatically included in the export</li>
115130
</ol>
116131

117132
<h4>Key Features:</h4>
118133
<ul>
119134
<li><strong>Direct API Usage:</strong> Uses IgxPdfExporterService.export() method directly</li>
120135
<li><strong>Configurable Options:</strong> Adjust orientation, page size, font size, and borders</li>
121136
<li><strong>Hierarchy Support:</strong> Tree and Hierarchical grids export with proper indentation</li>
137+
<li><strong>Multi-Column Headers:</strong> Column groups are preserved in the exported PDF</li>
138+
<li><strong>Summaries Support:</strong> Grid summaries are automatically exported to PDF</li>
122139
<li><strong>Multiple Grids:</strong> Export different grid types with the same configuration</li>
123140
</ul>
124141
</div>

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

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ import {
1414
IgxSelectItemComponent,
1515
IgxInputGroupComponent,
1616
IgxLabelDirective,
17-
IgxInputDirective
17+
IgxInputDirective,
18+
IgxColumnGroupComponent
1819
} from 'igniteui-angular';
1920

2021
@Component({
@@ -24,6 +25,7 @@ import {
2425
imports: [
2526
IgxGridComponent,
2627
IgxColumnComponent,
28+
IgxColumnGroupComponent,
2729
IgxTreeGridComponent,
2830
IgxHierarchicalGridComponent,
2931
IgxRowIslandComponent,
@@ -59,7 +61,11 @@ export class GridPdfExportSampleComponent {
5961
{ ID: 5, Name: 'Product E', Category: 'Clothing', Price: 79.99, InStock: true, LaunchDate: new Date(2023, 4, 12) },
6062
{ ID: 6, Name: 'Product F', Category: 'Electronics', Price: 899.99, InStock: false, LaunchDate: new Date(2023, 5, 8) },
6163
{ ID: 7, Name: 'Product G', Category: 'Books', Price: 24.99, InStock: true, LaunchDate: new Date(2023, 6, 22) },
62-
{ ID: 8, Name: 'Product H', Category: 'Clothing', Price: 39.99, InStock: true, LaunchDate: new Date(2023, 7, 18) }
64+
{ ID: 8, Name: 'Product H', Category: 'Clothing', Price: 39.99, InStock: true, LaunchDate: new Date(2023, 7, 18) },
65+
{ ID: 9, Name: 'Product I', Category: 'Electronics', Price: 1299.99, InStock: true, LaunchDate: new Date(2023, 8, 5) },
66+
{ ID: 10, Name: 'Product J', Category: 'Books', Price: 34.99, InStock: true, LaunchDate: new Date(2023, 9, 14) },
67+
{ ID: 11, Name: 'Product K', Category: 'Clothing', Price: 89.99, InStock: false, LaunchDate: new Date(2023, 10, 3) },
68+
{ ID: 12, Name: 'Product L', Category: 'Electronics', Price: 449.99, InStock: true, LaunchDate: new Date(2023, 11, 1) }
6369
];
6470

6571
// Tree Grid data
@@ -71,7 +77,11 @@ export class GridPdfExportSampleComponent {
7177
{ ID: 5, ParentID: -1, Name: 'Furniture', Budget: 3000 },
7278
{ ID: 6, ParentID: 5, Name: 'Chairs', Budget: 800 },
7379
{ ID: 7, ParentID: 5, Name: 'Desks', Budget: 1200 },
74-
{ ID: 8, ParentID: 5, Name: 'Cabinets', Budget: 1000 }
80+
{ ID: 8, ParentID: 5, Name: 'Cabinets', Budget: 1000 },
81+
{ ID: 9, ParentID: -1, Name: 'Office Supplies', Budget: 2500 },
82+
{ ID: 10, ParentID: 9, Name: 'Paper Products', Budget: 600 },
83+
{ ID: 11, ParentID: 9, Name: 'Writing Instruments', Budget: 400 },
84+
{ ID: 12, ParentID: 9, Name: 'Storage Solutions', Budget: 1500 }
7585
];
7686

7787
// Hierarchical Grid data
@@ -82,16 +92,29 @@ export class GridPdfExportSampleComponent {
8292
Revenue: 1000000,
8393
Employees: [
8494
{ ID: 1, Name: 'John Doe', Position: 'Manager', Salary: 80000 },
85-
{ ID: 2, Name: 'Jane Smith', Position: 'Developer', Salary: 70000 }
95+
{ ID: 2, Name: 'Jane Smith', Position: 'Developer', Salary: 70000 },
96+
{ ID: 3, Name: 'Mike Wilson', Position: 'Developer', Salary: 72000 }
8697
]
8798
},
8899
{
89100
ID: 2,
90101
CompanyName: 'Company B',
91102
Revenue: 2000000,
92103
Employees: [
93-
{ ID: 3, Name: 'Bob Johnson', Position: 'CEO', Salary: 150000 },
94-
{ ID: 4, Name: 'Alice Brown', Position: 'Designer', Salary: 65000 }
104+
{ ID: 4, Name: 'Bob Johnson', Position: 'CEO', Salary: 150000 },
105+
{ ID: 5, Name: 'Alice Brown', Position: 'Designer', Salary: 65000 },
106+
{ ID: 6, Name: 'Carol Davis', Position: 'Developer', Salary: 75000 }
107+
]
108+
},
109+
{
110+
ID: 3,
111+
CompanyName: 'Company C',
112+
Revenue: 1500000,
113+
Employees: [
114+
{ ID: 7, Name: 'David Lee', Position: 'Manager', Salary: 85000 },
115+
{ ID: 8, Name: 'Emma Taylor', Position: 'Analyst', Salary: 68000 },
116+
{ ID: 9, Name: 'Frank Martinez', Position: 'Developer', Salary: 73000 },
117+
{ ID: 10, Name: 'Grace Anderson', Position: 'Designer', Salary: 67000 }
95118
]
96119
}
97120
];

0 commit comments

Comments
 (0)