Export only filtered data on Kendo React Grid

9 posts, 1 answers
  1. Ravi
    Ravi avatar
    10 posts
    Member since:
    Jun 2020

    Posted 21 Jul 2020 Link to this post

    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

  2. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 21 Jul 2020 Link to this post

    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

  3. Ravi
    Ravi avatar
    10 posts
    Member since:
    Jun 2020

    Posted 23 Jul 2020 in reply to Stefan Link to this post

    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;


  4. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 24 Jul 2020 Link to this post

    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

  5. Ravi
    Ravi avatar
    10 posts
    Member since:
    Jun 2020

    Posted 11 Aug 2020 in reply to Stefan Link to this post

    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?

  6. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 12 Aug 2020 Link to this post

    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

  7. Ravi
    Ravi avatar
    10 posts
    Member since:
    Jun 2020

    Posted 12 Aug 2020 in reply to Stefan Link to this post

    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

  8. Answer
    Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 13 Aug 2020 Link to this post

    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

  9. Ravi
    Ravi avatar
    10 posts
    Member since:
    Jun 2020

    Posted 13 Aug 2020 in reply to Stefan Link to this post

    Hi Stefan,

    That worked for me. Thank you.

     

    - Ravi

Back to Top