Skip to content

Commit 551771a

Browse files
desig9steindesig9stein
committed
refactor(samples, styling): revamp grid-pdf-export sample layout and styling
- Replaced old SCSS structure with CSS Grid for modernized layout and consistency. - Introduced property panel for dynamic PDF export configuration. - Simplified and consolidated export functionality with `PropertyChangeService` integration. - Enhanced toolbar structure for better usability across all grid types.
1 parent c06b311 commit 551771a

5 files changed

Lines changed: 279 additions & 296 deletions

File tree

‎src/app/app.component.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@
6666
min-height: calc(100% - (var(--demo-navbar-size) + var(--demos-gap) + (var(--content-spacing) * 2)));
6767
overflow-y: auto;
6868
padding: var(--content-spacing);
69+
color: var(--ig-gray-900);
6970
}
7071

7172
.demos-filter {

‎src/app/grid-auto-size/grid-auto-size.sample.scss‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
.sample-buttons {
2-
margin-top: 24px;
3-
}
4-
5-
[igxButton] {
6-
margin-right: 8px;
7-
margin-bottom: 8px;
1+
:host {
2+
display: grid;
3+
gap: var(--demos-gap);
4+
height: 100%;
5+
align-items: start;
86
}

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

Lines changed: 111 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -1,140 +1,9 @@
1+
<p>
2+
This demo shows how to use the IgxPdfExporterService API directly to export grids to PDF format.
3+
Configure the export options using the right panel and click the export buttons.
4+
</p>
15

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-select [(ngModel)]="pageOrientation">
21-
<label igxLabel>Page Orientation</label>
22-
<igx-select-item value="portrait">Portrait</igx-select-item>
23-
<igx-select-item value="landscape">Landscape</igx-select-item>
24-
</igx-select>
25-
</div>
26-
27-
<div class="config-row">
28-
<igx-select [(ngModel)]="pageSize">
29-
<label igxLabel>Page Size</label>
30-
@for (size of pageSizes; track size) {
31-
<igx-select-item [value]="size">{{ size.toUpperCase() }}</igx-select-item>
32-
}
33-
</igx-select>
34-
</div>
35-
36-
<div class="config-row">
37-
<igx-input-group>
38-
<label igxLabel>Font Size</label>
39-
<input igxInput type="number" [(ngModel)]="fontSize" min="8" max="16" />
40-
</igx-input-group>
41-
</div>
42-
43-
<div class="config-row">
44-
<igx-switch [(ngModel)]="showTableBorders">Show Table Borders</igx-switch>
45-
</div>
46-
</div>
47-
48-
<!-- Regular Grid -->
49-
<div class="grid-container">
50-
<div class="grid-header">
51-
<h3>Regular Grid (with Multi-Column Headers and Summaries)</h3>
52-
<button igxButton="contained" (click)="exportGrid()">
53-
Export to PDF
54-
</button>
55-
</div>
56-
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-
70-
<igx-column field="LaunchDate" header="Launch Date" dataType="date" [width]="'150px'"></igx-column>
71-
</igx-grid>
72-
</div>
73-
74-
<!-- Tree Grid -->
75-
<div class="grid-container">
76-
<div class="grid-header">
77-
<h3>Tree Grid (with Hierarchy and Summaries)</h3>
78-
<button igxButton="contained" (click)="exportTreeGrid()">
79-
Export to PDF
80-
</button>
81-
</div>
82-
83-
<igx-tree-grid #treeGrid [data]="treeGridData" [autoGenerate]="false"
84-
primaryKey="ID" foreignKey="ParentID" height="500px" width="100%">
85-
<igx-column field="ID" header="ID" [width]="'100px'" [hasSummary]="true"></igx-column>
86-
<igx-column field="Name" header="Department Name" [width]="'300px'"></igx-column>
87-
<igx-column field="Budget" header="Budget" dataType="currency" [width]="'150px'" [hasSummary]="true"></igx-column>
88-
</igx-tree-grid>
89-
</div>
90-
91-
<!-- Hierarchical Grid -->
92-
<div class="grid-container">
93-
<div class="grid-header">
94-
<h3>Hierarchical Grid (with Multi-Column Headers and Summaries)</h3>
95-
<button igxButton="contained" (click)="exportHierarchicalGrid()">
96-
Export to PDF
97-
</button>
98-
</div>
99-
100-
<igx-hierarchical-grid #hierarchicalGrid [data]="hierarchicalGridData"
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>
108-
109-
<igx-row-island [key]="'Employees'" [autoGenerate]="false">
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>
118-
</igx-row-island>
119-
</igx-hierarchical-grid>
120-
</div>
121-
122-
<!-- Pivot Grid -->
123-
<div class="grid-container">
124-
<div class="grid-header">
125-
<h3>Pivot Grid (with Aggregated Data)</h3>
126-
<button igxButton="contained" (click)="exportPivotGrid()">
127-
Export to PDF
128-
</button>
129-
</div>
130-
131-
<div style="display: flex">
132-
<igx-pivot-grid #pivotGrid [data]="pivotGridData" [autoGenerateConfig]="true" height="850px" width="80%">
133-
</igx-pivot-grid>
134-
<igx-pivot-data-selector [grid]="pivotGrid"></igx-pivot-data-selector>
135-
</div>
136-
</div>
137-
6+
<div class="info-container">
1387
<div class="info-section">
1398
<h4>How to Use:</h4>
1409
<ol>
@@ -145,15 +14,114 @@ <h4>How to Use:</h4>
14514
<li>Multi-column headers and summaries are automatically included in the export</li>
14615
<li>Pivot grids export with aggregated data values</li>
14716
</ol>
17+
</div>
14818

19+
<div class="info-section">
14920
<h4>Key Features:</h4>
15021
<ul>
151-
<li><strong>Direct API Usage:</strong> Uses IgxPdfExporterService.export() method directly</li>
152-
<li><strong>Configurable Options:</strong> Adjust orientation, page size, font size, and borders</li>
153-
<li><strong>Hierarchy Support:</strong> Tree and Hierarchical grids export with proper indentation</li>
154-
<li><strong>Multi-Column Headers:</strong> Column groups are preserved in the exported PDF</li>
155-
<li><strong>Summaries Support:</strong> Grid summaries are automatically exported to PDF</li>
156-
<li><strong>Pivot Grid Support:</strong> Pivot grids export with aggregated data and pivot structure</li>
157-
<li><strong>Multiple Grids:</strong> Export different grid types with the same configuration</li>
22+
<li><span>Direct API Usage:</span> Uses IgxPdfExporterService.export() method directly</li>
23+
<li><span>Configurable Options:</span> Adjust orientation, page size, font size, and borders</li>
24+
<li><span>Hierarchy Support:</span> Tree and Hierarchical grids export with proper indentation</li>
25+
<li><span>Multi-Column Headers:</span> Column groups are preserved in the exported PDF</li>
26+
<li><span>Summaries Support:</span> Grid summaries are automatically exported to PDF</li>
27+
<li><span>Pivot Grid Support:</span> Pivot grids export with aggregated data and pivot structure</li>
28+
<li><span>Multiple Grids:</span> Export different grid types with the same configuration</li>
15829
</ul>
15930
</div>
31+
</div>
32+
33+
<!-- Regular Grid -->
34+
<div class="grids-container">
35+
<igx-grid #grid1 [data]="gridData" [autoGenerate]="false" height="500px" width="100%">
36+
<igx-grid-toolbar>
37+
<igx-grid-toolbar-title>
38+
Regular Grid (with Multi-Column Headers and Summaries)
39+
</igx-grid-toolbar-title>
40+
<igx-grid-toolbar-actions>
41+
<button class="demo-export-btn" igxButton="contained" (click)="exportGrid()">
42+
Export to PDF
43+
</button>
44+
</igx-grid-toolbar-actions>
45+
</igx-grid-toolbar>
46+
47+
<igx-column field="ID" header="ID" [width]="'80px'" [hasSummary]="true"></igx-column>
48+
49+
<igx-column-group header="Product Information">
50+
<igx-column field="Name" header="Product Name" [width]="'200px'"></igx-column>
51+
<igx-column field="Category" header="Category" [width]="'150px'"></igx-column>
52+
</igx-column-group>
53+
54+
<igx-column-group header="Financial Details">
55+
<igx-column field="Price" header="Price" dataType="currency" [width]="'120px'" [hasSummary]="true"></igx-column>
56+
<igx-column field="InStock" header="In Stock" dataType="boolean" [width]="'100px'" [hasSummary]="true"></igx-column>
57+
</igx-column-group>
58+
59+
<igx-column field="LaunchDate" header="Launch Date" dataType="date" [width]="'150px'"></igx-column>
60+
</igx-grid>
61+
62+
<igx-tree-grid #treeGrid [data]="treeGridData" [autoGenerate]="false"
63+
primaryKey="ID" foreignKey="ParentID" height="500px" width="100%">
64+
<igx-grid-toolbar>
65+
<igx-grid-toolbar-title>
66+
Tree Grid (with Hierarchy and Summaries)
67+
</igx-grid-toolbar-title>
68+
<igx-grid-toolbar-actions>
69+
<button class="demo-export-btn" igxButton="contained" (click)="exportTreeGrid()">
70+
Export PDF
71+
</button>
72+
</igx-grid-toolbar-actions>
73+
</igx-grid-toolbar>
74+
<igx-column field="ID" header="ID" [width]="'100px'" [hasSummary]="true"></igx-column>
75+
<igx-column field="Name" header="Department Name" [width]="'300px'"></igx-column>
76+
<igx-column field="Budget" header="Budget" dataType="currency" [width]="'150px'" [hasSummary]="true"></igx-column>
77+
</igx-tree-grid>
78+
79+
<igx-hierarchical-grid #hierarchicalGrid [data]="hierarchicalGridData"
80+
[autoGenerate]="false" height="500px" width="100%">
81+
82+
<igx-grid-toolbar>
83+
<igx-grid-toolbar-title>
84+
Hierarchical Grid (with Multi-Column Headers and Summaries)
85+
</igx-grid-toolbar-title>
86+
<igx-grid-toolbar-actions>
87+
<button class="demo-export-btn" igxButton="contained" (click)="exportHierarchicalGrid()">
88+
Export PDF
89+
</button>
90+
</igx-grid-toolbar-actions>
91+
</igx-grid-toolbar>
92+
93+
<igx-column field="ID" header="ID" [width]="'80px'" [hasSummary]="true"></igx-column>
94+
95+
<igx-column-group header="Company Details">
96+
<igx-column field="CompanyName" header="Company" [width]="'250px'"></igx-column>
97+
<igx-column field="Revenue" header="Revenue" dataType="currency" [width]="'150px'" [hasSummary]="true"></igx-column>
98+
</igx-column-group>
99+
100+
<igx-row-island [key]="'Employees'" [autoGenerate]="false">
101+
<igx-column field="ID" header="Employee ID" [width]="'120px'" [hasSummary]="true"></igx-column>
102+
103+
<igx-column-group header="Employee Info">
104+
<igx-column field="Name" header="Name" [width]="'200px'"></igx-column>
105+
<igx-column field="Position" header="Position" [width]="'150px'"></igx-column>
106+
</igx-column-group>
107+
108+
<igx-column field="Salary" header="Salary" dataType="currency" [width]="'120px'" [hasSummary]="true"></igx-column>
109+
</igx-row-island>
110+
</igx-hierarchical-grid>
111+
112+
<div class="demo-pivot-grid-container">
113+
<igx-pivot-grid #pivotGrid [data]="pivotGridData" [autoGenerateConfig]="true" height="850px" width="80%">
114+
<igx-grid-toolbar>
115+
<igx-grid-toolbar-title>
116+
Pivot Grid (with Aggregated Data)
117+
</igx-grid-toolbar-title>
118+
<igx-grid-toolbar-actions>
119+
<button class="demo-export-btn" igxButton="contained" (click)="exportPivotGrid()">
120+
Export PDF
121+
</button>
122+
</igx-grid-toolbar-actions>
123+
</igx-grid-toolbar>
124+
</igx-pivot-grid>
125+
<igx-pivot-data-selector [grid]="pivotGrid"></igx-pivot-data-selector>
126+
</div>
127+
</div>

0 commit comments

Comments
 (0)