Export to excel not working

[Binu]

Hi Team,

I am trying to export Grid data into Excel. But, its not working.

Reusable component.

import * as React from 'react';

import {

GridComponent, ColumnsDirective,

ColumnDirective as Column, Filter, Inject, VirtualScroll, Sort,

ExcelExport, Toolbar, Grid, ToolbarItems, Page

} from '@syncfusion/ej2-react-grids';

import { useState } from 'react';

const GenericGrid = ({

dataSource,

gridColumns,

gridPageSize,

isGridPaging,

isGridSortable,

isGridFilterable,

onSelectionChange,

isGridHoverable,

id,

toolbar,

toolbarClick

}) => {

let skipVal = 0;

let takeVal = 5;

let gridOriginalData = dataSource;

let gridSort = false;

let gridFilter = false;

let gridData = {

data: dataSource,//.slice(skipVal, takeVal + skipVal),

sort: [],

filter: undefined,

pageSize: gridPageSize,

skip: skipVal,

take: takeVal

};

const [updatedGridData, setGridData] = useState(gridData.data);

const [updatedGridSortData, setGridSortData] = useState(gridData.sort);

const [updatedGridFiltertData, setGridFilterData] = useState(gridData.filter);

function dataStateChange() {

setGridData(gridData.data);

setGridSortData(gridSort);

setGridFilterData(gridFilter);

}

function filterChange(filter) {

gridFilter = filter.filter;

dataStateChange();

}

function toolbarClick1(ClickEventArgs){

//Not wokring

let grid = document.getElementById(id);

console.log(grid);

grid.ExcelExport();

}

return (<div className='control-pane'>

<div className='control-section'>

<GridComponent

dataSource={updatedGridData}

enableHover={isGridHoverable}

allowFiltering={isGridFilterable}

allowSelection={onSelectionChange}

filterSettings={filterChange}

allowSorting={isGridSortable}

id={id}

allowPaging={isGridPaging} columns={gridColumns} toolbar={toolbar} toolbarClick={toolbarClick1}

>

{

<Inject services={[Sort, Filter, Toolbar, ExcelExport, Page]} />

}

</GridComponent>

</div>

</div>

);

}

export default GenericGrid;

Page where i am trying to call the grid component

import GenericGrid from './GenericGrid';

import * as React from 'react';

import { data } from './datasource';

import { useState, useCallback } from 'react';

function App(props) {

const grid = useState(GenericGrid | null);

const [Griddata, SetGridData] = useState(data);

const toolbar = ['ExcelExport', 'Search'];

const canvasRef = React.useRef(GenericGrid | null)

const toolbarClick = useCallback(

(e) => {

alert("clicked");

console.log(e);

},

[], // Tells React to memoize regardless of arguments.

);

const handleClick = event=> {

console.log(event.target);

// if (e.id == "ExcelExport_excelexport") {

// //download the excel

// }

// grid.excelExport();

console.log(grid);

}

const [fields] = useState(['OrderID', 'CustomerID', 'EmployeeID', 'Freight', 'ShipCountry'])

return <GenericGrid dataSource={Griddata}

isGridSortable={true}

gridColumns={fields}

gridPageSize={5}

id='ExcelExport' toolbar={toolbar}

//toolbarClick={handleClick}

isGridPaging="true"

isGridFilterable="true"></GenericGrid>

};

export default App;

[Seeni Sakthi Kumar Seeni Raj]

Hi Binu,  

Thanks for contacting Syncfusion Support.  

We have notices that your code is missing the API allowExcelExport which is required for Exporting the Grid to Excel sheet. Refer to the following Help Document.  

https://ej2.syncfusion.com/react/documentation/grid/excel-exporting/ 

https://ej2.syncfusion.com/react/documentation/api/grid/#allowexcelexport 

Regards,  

Seeni Sakthi Kumar S. 

[Binu]

HI,

After adding also not working.

[Seeni Sakthi Kumar Seeni Raj]

Hi Binu,  

The Grid instance created in your application is wrong which is the cause of the problem. Refer to the following code example and demo.  

    toolbarClick(args) { 

        switch (args.item.text) { 

            case 'PDF Export': 

                this.gridInstance.pdfExport(); 

                break; 

            case 'Excel Export': 

                this.gridInstance.excelExport(); 

                break; 

        } 

    } 

    render() { 

        return (<div className='control-pane'> 

            <div className='control-section'> 

                <GridComponent dataSource={orderDetails} ref={grid => this.gridInstance = grid} toolbar={this.toolbarOptions} allowPaging={true} allowExcelExport={true} allowPdfExport={true} toolbarClick={this.toolbarClick.bind(this)} > 

                    . . . 

                     . . . . 

            <Inject services={[Page, Toolbar, ExcelExport, PdfExport, Group]} /> 

                </GridComponent> 

            </div> 

        </div>); 

    } 

https://stackblitz.com/edit/react-dsm3jk?file=index.js 

Regards,  

Seeni Sakthi Kumar S.