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.

8 Answers, 1 is accepted

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;

Accepted