+ PDF Export Service Demo
+
+ This demo shows how to use the IgxPdfExporterService API directly to export grids to PDF format.
+ Configure the export options using the controls below and click the export buttons.
+
+
+
+
+
Export Options Configuration
+
+
+
+ File Name
+
+
+
+
+
+
+ Page Orientation
+ Portrait
+ Landscape
+
+
+
+
+
+ Page Size
+ @for (size of pageSizes; track size) {
+ {{ size.toUpperCase() }}
+ }
+
+
+
+
+
+ Font Size
+
+
+
+
+
+ Show Table Borders
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
How to Use:
+
+ Configure the export options using the controls at the top
+ Click any of the "Export to PDF" buttons to export the corresponding grid
+ The PDF will be downloaded with your configured settings
+ Tree and Hierarchical grids will show indentation in the exported PDF
+ Multi-column headers and summaries are automatically included in the export
+ Pivot grids export with aggregated data values
+
+
+
Key Features:
+
+ Direct API Usage: Uses IgxPdfExporterService.export() method directly
+ Configurable Options: Adjust orientation, page size, font size, and borders
+ Hierarchy Support: Tree and Hierarchical grids export with proper indentation
+ Multi-Column Headers: Column groups are preserved in the exported PDF
+ Summaries Support: Grid summaries are automatically exported to PDF
+ Pivot Grid Support: Pivot grids export with aggregated data and pivot structure
+ Multiple Grids: Export different grid types with the same configuration
+
+
+
diff --git a/src/app/grid-pdf-export/grid-pdf-export.sample.scss b/src/app/grid-pdf-export/grid-pdf-export.sample.scss
new file mode 100644
index 00000000000..b7b84f0356e
--- /dev/null
+++ b/src/app/grid-pdf-export/grid-pdf-export.sample.scss
@@ -0,0 +1,120 @@
+.sample-wrapper {
+ padding: 20px;
+ max-width: 1400px;
+ margin: 0 auto;
+}
+
+.sample-title {
+ color: #333;
+ margin-bottom: 10px;
+}
+
+.sample-description {
+ color: #666;
+ margin-bottom: 30px;
+ line-height: 1.6;
+}
+
+.config-panel {
+ background: #f5f5f5;
+ border-radius: 8px;
+ padding: 20px;
+ margin-bottom: 30px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+ h3 {
+ margin-top: 0;
+ margin-bottom: 20px;
+ color: #333;
+ }
+}
+
+.config-row {
+ margin-bottom: 15px;
+ display: inline-block;
+ margin-right: 20px;
+ min-width: 200px;
+
+ igx-input-group {
+ width: 100%;
+ }
+}
+
+.grid-container {
+ margin-bottom: 40px;
+ border: 1px solid #e0e0e0;
+ border-radius: 8px;
+ overflow: hidden;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.grid-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 15px 20px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+
+ h3 {
+ margin: 0;
+ font-size: 18px;
+ }
+
+ button {
+ background: white;
+ color: #667eea;
+ font-weight: 500;
+
+ &:hover {
+ background: #f0f0f0;
+ }
+ }
+}
+
+.info-section {
+ background: #e8f4f8;
+ border-left: 4px solid #2196F3;
+ padding: 20px;
+ border-radius: 4px;
+ margin-top: 30px;
+
+ h4 {
+ color: #1976D2;
+ margin-top: 0;
+ margin-bottom: 15px;
+ }
+
+ ol, ul {
+ line-height: 1.8;
+ color: #555;
+
+ li {
+ margin-bottom: 8px;
+ }
+ }
+
+ strong {
+ color: #1976D2;
+ }
+}
+
+// Responsive design
+@media (max-width: 768px) {
+ .config-row {
+ display: block;
+ width: 100%;
+ margin-right: 0;
+ min-width: unset;
+ }
+
+ .grid-header {
+ flex-direction: column;
+ gap: 10px;
+ align-items: flex-start;
+
+ button {
+ width: 100%;
+ }
+ }
+}
diff --git a/src/app/grid-pdf-export/grid-pdf-export.sample.ts b/src/app/grid-pdf-export/grid-pdf-export.sample.ts
new file mode 100644
index 00000000000..410ca32f6e6
--- /dev/null
+++ b/src/app/grid-pdf-export/grid-pdf-export.sample.ts
@@ -0,0 +1,195 @@
+import { Component, ViewChild, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+ IgxGridComponent,
+ IgxColumnComponent,
+ IgxPdfExporterService,
+ IgxPdfExporterOptions,
+ IgxTreeGridComponent,
+ IgxHierarchicalGridComponent,
+ IgxRowIslandComponent,
+ IgxButtonDirective,
+ IgxSwitchComponent,
+ IgxSelectComponent,
+ IgxSelectItemComponent,
+ IgxInputGroupComponent,
+ IgxLabelDirective,
+ IgxInputDirective,
+ IgxColumnGroupComponent,
+ IgxPivotGridComponent,
+ IgxPivotDataSelectorComponent
+} from 'igniteui-angular';
+
+@Component({
+ selector: 'app-grid-pdf-export-sample',
+ templateUrl: 'grid-pdf-export.sample.html',
+ styleUrls: ['grid-pdf-export.sample.scss'],
+ imports: [
+ IgxGridComponent,
+ IgxColumnComponent,
+ IgxColumnGroupComponent,
+ IgxTreeGridComponent,
+ IgxHierarchicalGridComponent,
+ IgxPivotGridComponent,
+ IgxPivotDataSelectorComponent,
+ IgxRowIslandComponent,
+ IgxButtonDirective,
+ IgxSwitchComponent,
+ IgxSelectComponent,
+ IgxSelectItemComponent,
+ IgxInputGroupComponent,
+ IgxLabelDirective,
+ IgxInputDirective,
+ FormsModule
+ ],
+ providers: [IgxPdfExporterService]
+})
+export class GridPdfExportSampleComponent {
+ private pdfExporter = inject(IgxPdfExporterService);
+
+ @ViewChild('grid1', { static: true })
+ public grid1: IgxGridComponent;
+
+ @ViewChild('treeGrid', { static: true })
+ public treeGrid: IgxTreeGridComponent;
+
+ @ViewChild('hierarchicalGrid', { static: true })
+ public hierarchicalGrid: IgxHierarchicalGridComponent;
+
+ @ViewChild('pivotGrid', { static: true })
+ public pivotGrid: IgxPivotGridComponent;
+
+ // Grid data
+ public gridData = [
+ { ID: 1, Name: 'Product A', Category: 'Electronics', Price: 299.99, InStock: true, LaunchDate: new Date(2023, 0, 15) },
+ { ID: 2, Name: 'Product B', Category: 'Clothing', Price: 49.99, InStock: true, LaunchDate: new Date(2023, 1, 20) },
+ { ID: 3, Name: 'Product C', Category: 'Electronics', Price: 599.99, InStock: false, LaunchDate: new Date(2023, 2, 10) },
+ { ID: 4, Name: 'Product D', Category: 'Books', Price: 19.99, InStock: true, LaunchDate: new Date(2023, 3, 5) },
+ { ID: 5, Name: 'Product E', Category: 'Clothing', Price: 79.99, InStock: true, LaunchDate: new Date(2023, 4, 12) },
+ { ID: 6, Name: 'Product F', Category: 'Electronics', Price: 899.99, InStock: false, LaunchDate: new Date(2023, 5, 8) },
+ { ID: 7, Name: 'Product G', Category: 'Books', Price: 24.99, InStock: true, LaunchDate: new Date(2023, 6, 22) },
+ { ID: 8, Name: 'Product H', Category: 'Clothing', Price: 39.99, InStock: true, LaunchDate: new Date(2023, 7, 18) },
+ { ID: 9, Name: 'Product I', Category: 'Electronics', Price: 1299.99, InStock: true, LaunchDate: new Date(2023, 8, 5) },
+ { ID: 10, Name: 'Product J', Category: 'Books', Price: 34.99, InStock: true, LaunchDate: new Date(2023, 9, 14) },
+ { ID: 11, Name: 'Product K', Category: 'Clothing', Price: 89.99, InStock: false, LaunchDate: new Date(2023, 10, 3) },
+ { ID: 12, Name: 'Product L', Category: 'Electronics', Price: 449.99, InStock: true, LaunchDate: new Date(2023, 11, 1) }
+ ];
+
+ // Tree Grid data
+ public treeGridData = [
+ { ID: 1, ParentID: -1, Name: 'Electronics', Budget: 5000 },
+ { ID: 2, ParentID: 1, Name: 'Laptops', Budget: 2000 },
+ { ID: 3, ParentID: 1, Name: 'Phones', Budget: 1500 },
+ { ID: 4, ParentID: 1, Name: 'Tablets', Budget: 1500 },
+ { ID: 5, ParentID: -1, Name: 'Furniture', Budget: 3000 },
+ { ID: 6, ParentID: 5, Name: 'Chairs', Budget: 800 },
+ { ID: 7, ParentID: 5, Name: 'Desks', Budget: 1200 },
+ { ID: 8, ParentID: 5, Name: 'Cabinets', Budget: 1000 },
+ { ID: 9, ParentID: -1, Name: 'Office Supplies', Budget: 2500 },
+ { ID: 10, ParentID: 9, Name: 'Paper Products', Budget: 600 },
+ { ID: 11, ParentID: 9, Name: 'Writing Instruments', Budget: 400 },
+ { ID: 12, ParentID: 9, Name: 'Storage Solutions', Budget: 1500 }
+ ];
+
+ // Hierarchical Grid data
+ public hierarchicalGridData = [
+ {
+ ID: 1,
+ CompanyName: 'Company A',
+ Revenue: 1000000,
+ Employees: [
+ { ID: 1, Name: 'John Doe', Position: 'Manager', Salary: 80000 },
+ { ID: 2, Name: 'Jane Smith', Position: 'Developer', Salary: 70000 },
+ { ID: 3, Name: 'Mike Wilson', Position: 'Developer', Salary: 72000 }
+ ]
+ },
+ {
+ ID: 2,
+ CompanyName: 'Company B',
+ Revenue: 2000000,
+ Employees: [
+ { ID: 4, Name: 'Bob Johnson', Position: 'CEO', Salary: 150000 },
+ { ID: 5, Name: 'Alice Brown', Position: 'Designer', Salary: 65000 },
+ { ID: 6, Name: 'Carol Davis', Position: 'Developer', Salary: 75000 }
+ ]
+ },
+ {
+ ID: 3,
+ CompanyName: 'Company C',
+ Revenue: 1500000,
+ Employees: [
+ { ID: 7, Name: 'David Lee', Position: 'Manager', Salary: 85000 },
+ { ID: 8, Name: 'Emma Taylor', Position: 'Analyst', Salary: 68000 },
+ { ID: 9, Name: 'Frank Martinez', Position: 'Developer', Salary: 73000 },
+ { ID: 10, Name: 'Grace Anderson', Position: 'Designer', Salary: 67000 }
+ ]
+ }
+ ];
+
+ public pivotGridData = [
+ {
+ ProductCategory: 'Clothing', UnitPrice: 12.81, SellerName: 'Stanley',
+ Country: 'Bulgaria', City: 'Sofia', Date: '01/01/2021', UnitsSold: 282
+ },
+ {
+ ProductCategory: 'Clothing', UnitPrice: 49.57, SellerName: 'Elisa',
+ Country: 'USA', City: 'New York', Date: '01/05/2019', UnitsSold: 296
+ },
+ {
+ ProductCategory: 'Bikes', UnitPrice: 3.56, SellerName: 'Lydia',
+ Country: 'Uruguay', City: 'Ciudad de la Costa', Date: '01/06/2020', UnitsSold: 68
+ },
+ {
+ ProductCategory: 'Accessories', UnitPrice: 85.58, SellerName: 'David',
+ Country: 'USA', City: 'New York', Date: '04/07/2021', UnitsSold: 293
+ },
+ {
+ ProductCategory: 'Components', UnitPrice: 18.13, SellerName: 'John',
+ Country: 'USA', City: 'New York', Date: '12/08/2021', UnitsSold: 240
+ },
+ {
+ ProductCategory: 'Clothing', UnitPrice: 68.33, SellerName: 'Larry',
+ Country: 'Uruguay', City: 'Ciudad de la Costa', Date: '05/12/2020', UnitsSold: 456
+ }
+ ];
+
+ // Export options
+ public fileName = 'GridExport';
+ public pageOrientation: 'portrait' | 'landscape' = 'landscape';
+ public pageSize = 'a4';
+ public showTableBorders = true;
+ public fontSize = 10;
+ public pageSizes = ['a3', 'a4', 'a5', 'letter', 'legal'];
+
+ public exportGrid() {
+ const options = this.createExportOptions();
+ this.pdfExporter.export(this.grid1, options);
+ }
+
+ public exportTreeGrid() {
+ const options = this.createExportOptions();
+ options.fileName = `TreeGrid_${this.fileName}`;
+ this.pdfExporter.export(this.treeGrid, options);
+ }
+
+ public exportHierarchicalGrid() {
+ const options = this.createExportOptions();
+ options.fileName = `HierarchicalGrid_${this.fileName}`;
+ this.pdfExporter.export(this.hierarchicalGrid, options);
+ }
+
+ public exportPivotGrid() {
+ const options = this.createExportOptions();
+ options.fileName = `PivotGrid_${this.fileName}`;
+ this.pdfExporter.export(this.pivotGrid, options);
+ }
+
+ private createExportOptions(): IgxPdfExporterOptions {
+ const options = new IgxPdfExporterOptions(this.fileName);
+ options.pageOrientation = this.pageOrientation;
+ options.pageSize = this.pageSize;
+ options.showTableBorders = this.showTableBorders;
+ options.fontSize = this.fontSize;
+ return options;
+ }
+}
diff --git a/src/app/hierarchical-grid-advanced-filtering/hierarchical-grid-advanced-filtering.sample.html b/src/app/hierarchical-grid-advanced-filtering/hierarchical-grid-advanced-filtering.sample.html
index b7fe0a8600a..82a158fa779 100644
--- a/src/app/hierarchical-grid-advanced-filtering/hierarchical-grid-advanced-filtering.sample.html
+++ b/src/app/hierarchical-grid-advanced-filtering/hierarchical-grid-advanced-filtering.sample.html
@@ -1,7 +1,14 @@
Sample One
-
+
+
+
+
+
+
+
+