React FlexGrid Export To Xlsx with OData data source

React FlexGrid Export To Xlsx with OData data source

Posted by: jschnurer on 12 April 2024, 7:43 am EST

• 

  jschnurer

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 12 April 2024, 7:43 am EST

  I am using the FlexGrid component in a React site. My FlexGrid uses a modified example that I found to allow it to use my OData endpoints. It loads a single page of data and then when the user changes the page, the sorting, or the filtering, it loads the new page. I was unable to understand (or get working) the default ODataCollectionView with my .net core odata endpoints. I have attached this file in case it is relevant.

  RestCollectionViewOData.zip

  I instantiate the data source for the grid like this:

  new RestCollectionViewOData(
          dataUrl,
          setIsLoading,
          {
            requestHeaders: {
              Authorization: `Bearer ${token}`,
            },
            pageSize,
            pageOnServer: true,
            sortOnServer: true,
            filterOnServer: true,
          })

  I am exporting to Xlsx using this function during a custom button click:

  FlexGridXlsxConverter.saveAsync(gridRef.current, {
          includeColumnHeaders: true,
          includeStyles: false,
        }, `${gridId}_Grid_Exported.xlsx`)

  When the data is exported, it only exports the current page of data. What I’d like to do is export ALL of the pages of data in 1 giant set, while still respecting the user’s applied sorting, filtering, and chosen columns.

  What is your suggestion for doing this?

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 16 April 2024, 7:39 pm EST

  Hello,

  Apologies for the delayed response. The exported Excel file is based on the content displayed in the FlexGrid rather than the entire dataset bound to the FlexGrid. When using paging, only the data visible in the grid (collectionView.items) is exported.

  If you require exporting the entire dataset, you would need to retrieve the complete dataset without paging. You can then pass this complete dataset to a dummy FlexGrid and export that grid to Excel, ensuring all page data is included in the exported file. I’ve implemented custom functions in the rest-collection-view-odata.jsx file to facilitate fetching the entire dataset. Feel free to customize it further to meet your specific needs. You can find a sample demonstrating this approach at the following link:

  Sample Link: https://stackblitz.com/edit/react-oquhn7?file=index.js

  Please note that this approach may impact performance depending on the time taken to fetch the complete dataset from the server and any customizations required in the exported Excel file.

  Alternatively, you can explore another approach by sending a download request to your server and process the Excel file there, and get that processed file on the client. This method can also be implemented if it aligns better with your requirements.

  Regards

• 

  jschnurer

  • Post Options:
  • Link
    Copy

  Posted 22 April 2024, 2:40 am EST

  Thanks, I did something similar.