Export only filtered data on Kendo React Grid

Hello, Ravi,

Regarding both exports:

1) 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:

                        <ExcelExport
                            data={this.state.filteredData}

Regards,
Stefan
Progress Telerik

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;

Hello, Ravi,

Thank you for the code.

Based on the code, the Excel document should only have the data that is in excelData. Could you please console.log(excelData) inside the exportExcel function, to check its value just before the export?

I also made an example with filterable Grid, ExcelExport and it is working as expected:

https://stackblitz.com/edit/react-b7z3gf?file=app/main.jsx

Regards,
Stefan
Progress Telerik

Hi Stefan,

Thank you the example.

My requirement is to have pagination and export filtered data. Following your example, I was able to export filtered data (using filterby method) but I couldn't add pagination to the grid. If I use filterby method I couldn't achieve pagination and If I use process method I couldn't achieve filtered data to export. 

Can you provide a working example which has both pagination and ability to export filtered data?

Hello, Ravi,

Please share which data we have to export in Excel? For example, we have 100 records on 10 pages by 10 records each. We filter it and have 30 remaining records on 3 pages?

What is required to be included in the Excel?

Regards,
Stefan
Progress Telerik

Hi Stefan, 

We have to export the filtered results. Taking your example, we have to export the 30 remaining records on 3 pages because those are the results of filters.

Thanks

Ravi

Hello, Ravi,

This can be achieved by applying both paging and filtering in the Grid and only the filtering for the Excel:

https://stackblitz.com/edit/react-b7z3gf-pk2pk3?file=app%2Fmain.jsx

      <ExcelExport
        data={filterBy(products, this.state.dataState.filter)} // export filtered data from all pages
        ref={exporter => (this._export = exporter)}
      >
        <Grid
          style={{ height: "420px" }}
          data={process(products, this.state.dataState)} // show filtered and paged data

Regards,
Stefan
Progress Telerik

Hi Stefan,

That worked for me. Thank you.

- Ravi