feature(EJ2-3507): Samples added for Grid to Excel,CSV & PDF export

package.json

@@ -19,6 +19,10 @@
 		"@syncfusion/ej2-circulargauge": "*",
 		"@syncfusion/ej2-lineargauge": "*",
 		"@syncfusion/ej2-navigations": "*",
+		"@syncfusion/ej2-pdf": "*",
+		"@syncfusion/ej2-excel-export": "*",
+		"@syncfusion/ej2-file-utils": "*",
+		"@syncfusion/ej2-compression": "*",
 		"cheerio": "^1.0.0-rc.1",
 		"crossroads": "^0.12.2",
 		"hasher": "^1.2.0"

src/grid/exporting.html

@@ -0,0 +1,21 @@
+<div class="control-section">
+    <div class="content-wrapper">
+        <div id="Grid">
+        </div>
+    </div>
+</div>
+<div id="description">
+    <p>Grid supports client side exporting which allows you to export its data to Excel, Pdf and CSV formats.</p>
+    <p>In this demo, excelexport, pdfexport and csvexport items are defined in toolbar. For these toolbar items, we have defined
+        actions in toolbarClick event to export the Grid data using the 
+        <code><a target="_blank" class="code"
+
+            href="http://ej2.syncfusion.com/documentation/grid/api-grid.html#excelexport">excelExport</a></code>, 
+            <code><a target="_blank" class="code"
+                href="http://ej2.syncfusion.com/documentation/grid/api-grid.html#pdfexport">pdfExport</a></code>  
+                and <code><a target="_blank" class="code"
+                    href="http://ej2.syncfusion.com/documentation/grid/api-grid.html#csvexport">csvExport</a></code>  methods.</p>
+        <p style="font-weight: 500">Injecting Module</p>
+    <p><br/>Grid features are segregated into individual feature-wise modules. To use exporting feature, we need to inject ExcelExport
+        and PdfExport module using the <code>Grid.Inject(ExcelExport, PdfExport)</code> method.</p>
+</div>

src/grid/exporting.ts

@@ -0,0 +1,40 @@
+import { Grid, Page, Toolbar, ExcelExport, PdfExport } from '@syncfusion/ej2-grids';
+import { orderData } from './datasource';
+
+Grid.Inject(Page, Toolbar, ExcelExport, PdfExport);
+/**
+ * Excel,PDF, CSV export sample
+ */
+this.default = (): void => {
+    let grid: Grid = new Grid(
+        {
+            dataSource: orderData.splice(0, 200),
+            allowExcelExport: true,
+            allowPdfExport: true,
+            allowPaging: true,
+            toolbar: ['excelexport', 'pdfexport', 'csvexport'],
+            pageSettings: { pageCount: 5 },
+            columns: [
+                { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'right' },
+                { field: 'CustomerName', headerText: 'Customer Name', width: 150 },
+                { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'right' },
+                { field: 'Freight', width: 120, format: 'C2', textAlign: 'right' },
+                { field: 'ShipCountry', visible: false, headerText: 'Ship Country', width: 150 },
+                { field: 'ShipCity', visible: false, headerText: 'Ship City', width: 150 }
+            ]
+        });
+    grid.appendTo('#Grid');
+    grid.toolbarClick = (args: Object) => {
+        /* tslint:disable */
+        if ((args as any)['item'].id === 'Grid_pdfexport') {
+            grid.pdfExport();
+        }
+        if ((args as any)['item'].id === 'Grid_excelexport') {
+            grid.excelExport();
+        }
+        if ((args as any)['item'].id === 'Grid_csvexport') {
+            grid.csvExport();
+        }
+        /* tslint:enable */
+    };
+};

src/grid/multiple-exporting.html

@@ -0,0 +1,28 @@
+<div class="control-section">
+    <div class="content-wrapper">
+        <div>
+            <p><b>First Grid</b></p>
+        </div>
+        <div id="FirstGrid">
+        </div>
+        <div>
+            <p><b><br/>Second Grid</b></p>
+        </div>
+        <div id="SecondGrid">
+        </div>
+    </div>
+</div>
+<div id="description">
+    <p>Grid supports client side exporting which allows you to export its data to Excel, Pdf and CSV formats.</p>
+    <p>In this demo, excelexport and pdfexport items are defined in toolbar. For these toolbar items, we have defined actions
+        in toolbarClick event to export multiple Grids in same document using the 
+        <code><a target="_blank" class="code"
+
+            href="http://ej2.syncfusion.com/documentation/grid/api-grid.html#excelexport">excelExport</a></code>, 
+            <code><a target="_blank" class="code"
+                href="http://ej2.syncfusion.com/documentation/grid/api-grid.html#pdfexport">pdfExport</a></code>
+                 methods.</p>
+        <p style="font-weight: 500">Injecting Module</p>
+    <p> features are segregated into individual feature-wise modules. To use exporting feature, we need to inject ExcelExport
+        and PdfExport module using the <code>Grid.Inject(ExcelExport, PdfExport)</code> method.</p>
+</div>

src/grid/multiple-exporting.ts

@@ -0,0 +1,50 @@
+import { Grid, Toolbar, ExcelExport, PdfExport } from '@syncfusion/ej2-grids';
+import { orderData, productData } from './datasource';
+
+Grid.Inject(Toolbar, ExcelExport, PdfExport);
+/**
+ * Multiple Grid Exporting to Excel, PDF sample
+ */
+this.default = (): void => {
+    let firstGrid: Grid = new Grid({
+        dataSource: orderData.splice(0, 5),
+        allowExcelExport: true,
+        allowPdfExport: true,
+        toolbar: ['excelexport', 'pdfexport'],
+        columns: [
+            { field: 'OrderID', headerText: 'Order ID', textAlign: 'right', width: 120, type: 'number' },
+            { field: 'OrderDate', headerText: 'Order Date', textAlign: 'right', width: 140, format: 'yMd' },
+            { field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' },
+            { field: 'Freight', headerText: 'Freight', textAlign: 'right', width: 120, format: 'C' },
+        ],
+    });
+
+    let secondGrid: Grid = new Grid({
+        dataSource: productData.splice(0, 5),
+        allowExcelExport: true,
+        allowPdfExport: true,
+        columns: [
+            { field: 'ProductID', headerText: 'Product ID', textAlign: 'right', width: 120 },
+            { field: 'ProductName', headerText: 'Product Name', width: 145 },
+            { field: 'UnitPrice', headerText: 'Unit Price', textAlign: 'right', width: 140, format: 'C2' },
+        ],
+    });
+    firstGrid.appendTo('#FirstGrid');
+    secondGrid.appendTo('#SecondGrid');
+    firstGrid.toolbarClick = (args: Object) => {
+        /* tslint:disable */
+        if ((args as any)['item'].id === 'FirstGrid_excelexport') {
+            let firstGridExcelExport: Promise<any> = firstGrid.excelExport({}, true);
+            firstGridExcelExport.then((bookData: any) => {
+                secondGrid.excelExport({}, false, bookData);
+            });
+        }
+        if ((args as any)['item'].id === 'FirstGrid_pdfexport') {
+            let firstGridPdfExport: Promise<Object> = firstGrid.pdfExport({}, true);
+            firstGridPdfExport.then((pdfData: Object) => {
+                secondGrid.pdfExport({}, false, pdfData);
+            });
+        }
+        /* tslint:enable */
+    };
+};

src/grid/sample.json

@@ -37,6 +37,8 @@
     {"url":"normal-editing", "name": "Inline Editing", "category":"Editing", "type": "new"},
     {"url":"dialog-editing", "name": "Dialog Editing", "category":"Editing", "type": "new"},
     {"url":"batch-editing", "name": "Batch Editing", "category":"Editing", "type": "new"},
-    {"url":"columnresize", "name": "Column Resizing", "category":"Columns", "type": "new"}
+    {"url":"columnresize", "name": "Column Resizing", "category":"Columns", "type": "new"},
+    {"url":"exporting", "name": "Basic", "category":"Exporting", "type": "new"},
+    {"url":"multiple-exporting", "name": "Multiple Exporting", "category":"Exporting", "type": "new"}
    ]
 }