This is a migrated thread and some comments may be shown as answers.

Export only filtered data on Kendo React Grid

8 Answers 211 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Ravi
Top achievements
Rank 1
Veteran
Ravi asked on 21 Jul 2020, 05:39 AM

Hi,

Is there a way to export (to Excel or PDF) only filtered data on Kendo React Grid?

The example (below URL) from KendoReact provides way to export to Excel and PDF, but if I filter by costomerId and if I export it exports all the data. I'm looking for way to export only the filtered data.

https://www.telerik.com/kendo-react-ui/components/grid/

 

Any help is appreciated.

Thanks

8 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 21 Jul 2020, 11:24 AM

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}
2) PDF - The save method, has an optional data parameter and here we can pass the filtered data and the Grid will be exported with that data:
https://www.telerik.com/kendo-react-ui/components/pdfprocessing/api/GridPDFExport/#toc-save

 

Regards,
Stefan
Progress Telerik

0
Ravi
Top achievements
Rank 1
Veteran
answered on 23 Jul 2020, 08:52 PM

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;


0
Stefan
Telerik team
answered on 24 Jul 2020, 05:21 AM

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

0
Ravi
Top achievements
Rank 1
Veteran
answered on 11 Aug 2020, 04:57 PM

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?

0
Stefan
Telerik team
answered on 12 Aug 2020, 12:01 PM

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

0
Ravi
Top achievements
Rank 1
Veteran
answered on 12 Aug 2020, 03:07 PM

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

0
Accepted
Stefan
Telerik team
answered on 13 Aug 2020, 07:54 AM

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

0
Ravi
Top achievements
Rank 1
Veteran
answered on 13 Aug 2020, 06:25 PM

Hi Stefan,

That worked for me. Thank you.

 

- Ravi

Tags
General Discussions
Asked by
Ravi
Top achievements
Rank 1
Veteran
Answers by
Stefan
Telerik team
Ravi
Top achievements
Rank 1
Veteran
Share this question
or