Excel - This will depend on the data that is passed on the ExcelExport data prop. We have to pass the filtered data to the ExcelExport: I tried in the following way but not successful. Can you provide an example on how to set filteredData to ExcelExport? The grid i'm working with already has pagination and filtering. I need to add Excel Export functionality to it.
Below is how I tried to achieve:
import React, { useEffect, useState } from "react";
import { Grid, GridColumn, GridToolbar } from "@progress/kendo-react-grid";
import { process, State } from "@progress/kendo-data-query";
import "@progress/kendo-theme-bootstrap/dist/all.css";
import { ExcelExport } from "@progress/kendo-react-excel-export";
import { filterBy } from "@progress/kendo-data-query";
const ds: State = {
sort: [{ field: "title", dir: "asc" }],
take: 10,
skip: 0,
};
const filter: State = {
filter: {
logic: "or",
filters: [{ field: "title", operator: "contains", value: "" }],
},
};
const GetGrid = () => {
const [data, setData] = useState<Array<IData>>([]);
const [dataState, setDataState] = useState(ds);
const [filterState, setFilterState] = useState(filter);
const [excelData, setExcelData] = useState<Array<IData>>([]);
useEffect(() => {
const getData = async () => {
try {
const data = getDataFromServer(); //this gives an array of objects
setData(data);
} catch (error) {}
};
getData();
}, []);
let _export: any;
const exportExcel = () => {
_export.save();
};
const pageChange = (event: any) => {
setDataState({
...dataState,
skip: event.page.skip,
take: event.page.take,
});
};
const filterChangeHandler = (e: any) => {
debugger;
setFilterState({
...filterState,
filter: e.filter,
});
const d = filterBy(data, e.filter);
//updating state based on filter change
setExcelData(d);
console.log("filterBy ===>", d);
};
return (
<>
<ExcelExport
//on filter change updating data for excel export
data={excelData}
ref={(exporter) => {
_export = exporter;
}}
>
<Grid
sortable
filterable
pageable={{ buttonCount: 4, pageSizes: true }}
total={data.length}
data={process(data, dataState)}
{...dataState}
{...filterState}
onDataStateChange={(e) => {
console.log("onDataStateChange ==>", e.data);
setDataState(e.data);
}}
onPageChange={pageChange}
onFilterChange={filterChangeHandler}
>
<GridToolbar>
<div className="float-right">
<button
type="button"
title="Export to Excel"
className="btn btn-primary"
onClick={exportExcel}
>
Export to Excel
</button>
</div>
</GridToolbar>
<GridColumn field="number" title="Number" />
<GridColumn width="300px" field="title" title="Title" />
<GridColumn field="date" title="Date" />
<GridColumn field="status" title="Status" />
</Grid>
</ExcelExport>
</>
);
};
export default GetGrid;