Skip to content

Commit 5eb1372

Browse files
author
pipeline
committed
feature(EJ2-3507): Samples added for Grid to Excel,CSV & PDF export
1 parent b732a57 commit 5eb1372

File tree

9 files changed

+149
-2
lines changed

9 files changed

+149
-2
lines changed

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@
1919
"@syncfusion/ej2-circulargauge": "*",
2020
"@syncfusion/ej2-lineargauge": "*",
2121
"@syncfusion/ej2-navigations": "*",
22+
"@syncfusion/ej2-pdf": "*",
23+
"@syncfusion/ej2-excel-export": "*",
24+
"@syncfusion/ej2-file-utils": "*",
25+
"@syncfusion/ej2-compression": "*",
2226
"cheerio": "^1.0.0-rc.1",
2327
"crossroads": "^0.12.2",
2428
"hasher": "^1.2.0"

‎src/common/sampleList.ts‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎src/grid/exporting-plnkr.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎src/grid/exporting.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<div class="control-section">
2+
<div class="content-wrapper">
3+
<div id="Grid">
4+
</div>
5+
</div>
6+
</div>
7+
<div id="description">
8+
<p>Grid supports client side exporting which allows you to export its data to Excel, Pdf and CSV formats.</p>
9+
<p>In this demo, excelexport, pdfexport and csvexport items are defined in toolbar. For these toolbar items, we have defined
10+
actions in toolbarClick event to export the Grid data using the
11+
<code><a target="_blank" class="code"
12+
13+
href="http://ej2.syncfusion.com/documentation/grid/api-grid.html#excelexport">excelExport</a></code>,
14+
<code><a target="_blank" class="code"
15+
href="http://ej2.syncfusion.com/documentation/grid/api-grid.html#pdfexport">pdfExport</a></code>
16+
and <code><a target="_blank" class="code"
17+
href="http://ej2.syncfusion.com/documentation/grid/api-grid.html#csvexport">csvExport</a></code> methods.</p>
18+
<p style="font-weight: 500">Injecting Module</p>
19+
<p><br/>Grid features are segregated into individual feature-wise modules. To use exporting feature, we need to inject ExcelExport
20+
and PdfExport module using the <code>Grid.Inject(ExcelExport, PdfExport)</code> method.</p>
21+
</div>

‎src/grid/exporting.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Grid, Page, Toolbar, ExcelExport, PdfExport } from '@syncfusion/ej2-grids';
2+
import { orderData } from './datasource';
3+
4+
Grid.Inject(Page, Toolbar, ExcelExport, PdfExport);
5+
/**
6+
* Excel,PDF, CSV export sample
7+
*/
8+
this.default = (): void => {
9+
let grid: Grid = new Grid(
10+
{
11+
dataSource: orderData.splice(0, 200),
12+
allowExcelExport: true,
13+
allowPdfExport: true,
14+
allowPaging: true,
15+
toolbar: ['excelexport', 'pdfexport', 'csvexport'],
16+
pageSettings: { pageCount: 5 },
17+
columns: [
18+
{ field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'right' },
19+
{ field: 'CustomerName', headerText: 'Customer Name', width: 150 },
20+
{ field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'right' },
21+
{ field: 'Freight', width: 120, format: 'C2', textAlign: 'right' },
22+
{ field: 'ShipCountry', visible: false, headerText: 'Ship Country', width: 150 },
23+
{ field: 'ShipCity', visible: false, headerText: 'Ship City', width: 150 }
24+
]
25+
});
26+
grid.appendTo('#Grid');
27+
grid.toolbarClick = (args: Object) => {
28+
/* tslint:disable */
29+
if ((args as any)['item'].id === 'Grid_pdfexport') {
30+
grid.pdfExport();
31+
}
32+
if ((args as any)['item'].id === 'Grid_excelexport') {
33+
grid.excelExport();
34+
}
35+
if ((args as any)['item'].id === 'Grid_csvexport') {
36+
grid.csvExport();
37+
}
38+
/* tslint:enable */
39+
};
40+
};

‎src/grid/multiple-exporting-plnkr.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎src/grid/multiple-exporting.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<div class="control-section">
2+
<div class="content-wrapper">
3+
<div>
4+
<p><b>First Grid</b></p>
5+
</div>
6+
<div id="FirstGrid">
7+
</div>
8+
<div>
9+
<p><b><br/>Second Grid</b></p>
10+
</div>
11+
<div id="SecondGrid">
12+
</div>
13+
</div>
14+
</div>
15+
<div id="description">
16+
<p>Grid supports client side exporting which allows you to export its data to Excel, Pdf and CSV formats.</p>
17+
<p>In this demo, excelexport and pdfexport items are defined in toolbar. For these toolbar items, we have defined actions
18+
in toolbarClick event to export multiple Grids in same document using the
19+
<code><a target="_blank" class="code"
20+
21+
href="http://ej2.syncfusion.com/documentation/grid/api-grid.html#excelexport">excelExport</a></code>,
22+
<code><a target="_blank" class="code"
23+
href="http://ej2.syncfusion.com/documentation/grid/api-grid.html#pdfexport">pdfExport</a></code>
24+
methods.</p>
25+
<p style="font-weight: 500">Injecting Module</p>
26+
<p> features are segregated into individual feature-wise modules. To use exporting feature, we need to inject ExcelExport
27+
and PdfExport module using the <code>Grid.Inject(ExcelExport, PdfExport)</code> method.</p>
28+
</div>

‎src/grid/multiple-exporting.ts‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { Grid, Toolbar, ExcelExport, PdfExport } from '@syncfusion/ej2-grids';
2+
import { orderData, productData } from './datasource';
3+
4+
Grid.Inject(Toolbar, ExcelExport, PdfExport);
5+
/**
6+
* Multiple Grid Exporting to Excel, PDF sample
7+
*/
8+
this.default = (): void => {
9+
let firstGrid: Grid = new Grid({
10+
dataSource: orderData.splice(0, 5),
11+
allowExcelExport: true,
12+
allowPdfExport: true,
13+
toolbar: ['excelexport', 'pdfexport'],
14+
columns: [
15+
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'right', width: 120, type: 'number' },
16+
{ field: 'OrderDate', headerText: 'Order Date', textAlign: 'right', width: 140, format: 'yMd' },
17+
{ field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' },
18+
{ field: 'Freight', headerText: 'Freight', textAlign: 'right', width: 120, format: 'C' },
19+
],
20+
});
21+
22+
let secondGrid: Grid = new Grid({
23+
dataSource: productData.splice(0, 5),
24+
allowExcelExport: true,
25+
allowPdfExport: true,
26+
columns: [
27+
{ field: 'ProductID', headerText: 'Product ID', textAlign: 'right', width: 120 },
28+
{ field: 'ProductName', headerText: 'Product Name', width: 145 },
29+
{ field: 'UnitPrice', headerText: 'Unit Price', textAlign: 'right', width: 140, format: 'C2' },
30+
],
31+
});
32+
firstGrid.appendTo('#FirstGrid');
33+
secondGrid.appendTo('#SecondGrid');
34+
firstGrid.toolbarClick = (args: Object) => {
35+
/* tslint:disable */
36+
if ((args as any)['item'].id === 'FirstGrid_excelexport') {
37+
let firstGridExcelExport: Promise<any> = firstGrid.excelExport({}, true);
38+
firstGridExcelExport.then((bookData: any) => {
39+
secondGrid.excelExport({}, false, bookData);
40+
});
41+
}
42+
if ((args as any)['item'].id === 'FirstGrid_pdfexport') {
43+
let firstGridPdfExport: Promise<Object> = firstGrid.pdfExport({}, true);
44+
firstGridPdfExport.then((pdfData: Object) => {
45+
secondGrid.pdfExport({}, false, pdfData);
46+
});
47+
}
48+
/* tslint:enable */
49+
};
50+
};

‎src/grid/sample.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@
3737
{"url":"normal-editing", "name": "Inline Editing", "category":"Editing", "type": "new"},
3838
{"url":"dialog-editing", "name": "Dialog Editing", "category":"Editing", "type": "new"},
3939
{"url":"batch-editing", "name": "Batch Editing", "category":"Editing", "type": "new"},
40-
{"url":"columnresize", "name": "Column Resizing", "category":"Columns", "type": "new"}
40+
{"url":"columnresize", "name": "Column Resizing", "category":"Columns", "type": "new"},
41+
{"url":"exporting", "name": "Basic", "category":"Exporting", "type": "new"},
42+
{"url":"multiple-exporting", "name": "Multiple Exporting", "category":"Exporting", "type": "new"}
4143
]
4244
}

0 commit comments

Comments
 (0)