Log in to start a topic

Export UI values from grid

Posted by: sdayal on 6 August 2021, 3:02 am EST

  • sdayal

    Posted 6 August 2021, 3:02 am EST - Updated 3 October 2022, 12:45 pm EST

    Hi team,

    In the given below snippet, If i export the grid, we are not getting the values of cells as present on the UI.

    Example : ALL is displayed as the list of values(collectionView) after export on the excel sheet.

    We want to export the UI values of cells.

    https://stackblitz.com/edit/angular-fkdirg?file=src/app/app.component.ts

    In the below screenshot, the values exported are not what is shown on UI. How can we achieve this functionality to export UI values?

    Also How can i copy the cell css as well ?

    regards

  • sdayal

    Posted 8 August 2021, 10:35 pm EST

    Hi team,

    Can you help us with the solution.

    regards

  • ashwin.saxena

    Posted 9 August 2021, 6:38 am EST

    Hi Shiva,

    I have updated the sample to export the ‘All’ and other values to the excel file instead of the cell’s value:

    https://stackblitz.com/edit/angular-ggchro

    Regarding CSS, the includeCellsStyle property will automatically add the CSS to the excel file. But note that all the CSS will not be copied. Some CSS is not compatible with excel like borders.

    Regards,

    Ashwin

  • sdayal

    Posted 10 August 2021, 4:29 am EST

    Hi Ashwin,

    The above solution is not working for us because of huge data.

    for Example we have 15000 rows and each rows has 8 cells then the above method is becomes unresponsive as the looping becomes equal to 15k*8 times.

    Is there any other solution where the UI data gets exported.

    Please help us with the solution.

    Regards

  • sdayal

    Posted 11 August 2021, 12:03 am EST

    Hi team,

    Please help us with the solution.

    Regards

  • ashwin.saxena

    Posted 11 August 2021, 1:04 am EST

    Hi,

    We are working on this and will update you as soon as possible.

  • ashwin.saxena

    Posted 11 August 2021, 2:12 am EST

    Hi Shiva,

    I have updated the sample to use the cloned grid method. But, unfortunately, I was unable to understand the exact logic behind how you are setting All value. So, I have added a method called getCellValue which takes the current item and binding of the column. You will need to implement this method according to your logic. The returned value will be exported to excel.

    Let me know if this works for you.

    ~regards

  • sdayal

    Posted 11 August 2021, 2:45 am EST

    Hi Ashwin,

    Can you provide me the sample’s link ?

    Regards

  • ashwin.saxena

    Posted 11 August 2021, 3:02 am EST

    Sorry for the inconvenience, here is the link

    https://stackblitz.com/edit/angular-xgc13k

  • ashwin.saxena

    Posted 11 August 2021, 3:02 am EST

    Refer to line 199

  • sdayal

    Posted 17 August 2021, 1:17 am EST

  • sdayal

    Posted 17 August 2021, 1:27 am EST - Updated 3 October 2022, 12:45 pm EST

    Hi Ashwin,

    Made few changes in the above code. Instead of using the formatItem event ( this was taking a long time for our case), I have created a new data( data1 - refer line171) which I’m sending to the clonedGrid method. Export is working fine except for few cases.

    This change is not working for few conditions one of which is :-

    1. filter subjects column using filter number 2 and 3.
    2. then apply filter on section column as ‘B’
    3. Export the grid.

      Result - blank excel sheet is getting downloaded.

      For other cases We are getting one error also - observe the console for that.

    The issue is with code we are sourceData.item as empty array when we apply some filter otherwise it works fine.

    getClonedGrid(grid, sourceCollection: any) {

    const sourceData = new wjcCore.CollectionView(

    JSON.parse(JSON.stringify(sourceCollection)),

    {

    sortDescriptions: grid.collectionView.sortDescriptions,

    groupDescriptions: grid.collectionView.groupDescriptions,

    filter: grid.collectionView.filter

    }

    );

    Please provide solution for this issue.

    Regards

  • sdayal

    Posted 17 August 2021, 6:38 am EST

    Hi Wijmo Team,

    Please provide solution for this.

  • ashwin.saxena

    Posted 17 August 2021, 11:05 pm EST

    Hi Shiva,

    We are working on this and will update you as soon as possible.

    ~regards

  • ashwin.saxena

    Posted 18 August 2021, 6:54 am EST

    Hi Shiva,

    The issue occurred because of the filter property. When you assigned the filter to the new CollectionView, it filters out all the items because the equality works by reference. But in this case, a new array is created using JSON.parse method so no two items are equal. If you will remove the filter, then all the items will be exported.

    https://stackblitz.com/edit/angular-atvchk

    ~regards

  • sdayal

    Posted 18 August 2021, 7:25 am EST

    Hi Ashwin,

    On application of filter we need the filtered data to be exported which is selected using the select-all header.

    example :- If we apply filter as mentioned in the above gif which i shared for the previous reply. then we have only 2 rows as result and if i select those two rows using the select-all header then only those two rows should be exported not the entire data.

    Initially we were getting blank excel as result.( as shown in the previous reply)

    In your sample we are getting the entire data.

    We want only the data selected by select-all header to be exported.

    Please provide solution.

    Regards.

  • ashwin.saxena

    Posted 18 August 2021, 7:31 am EST

    I have updated the sample accordingly:

    https://stackblitz.com/edit/angular-atvchk

    Refer to line 164

  • sdayal

    Posted 19 August 2021, 12:37 am EST - Updated 3 October 2022, 12:45 pm EST

    Hi Ashwin,

    In the updated sample https://stackblitz.com/edit/angular-xkgtcz?file=src/app/app.component.ts

    I just decreased the page size from 5 to 3. Now if my filtered data lies in more than one page then export is exporting only the 1st page data(data shown on the grid) and not all the filtered data.

    Apply the filter as shown in gif and check the excel sheet it doesn’t contain the entire data. Also we have one Console error.

    Please look into this.

    Regards.

  • ashwin.saxena

    Posted 19 August 2021, 9:58 am EST

    Hi,

    I am working on this and will update you tomorrow.

    ~regards

  • sharad.tomer

    Posted 20 August 2021, 9:12 am EST

    Hi,

    I have updated the sample to fix the issue, please refer to the following updated sample:

    https://stackblitz.com/edit/angular-yykuqr?file=src%2Fapp%2Fapp.component.ts

    ~sharad

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

  • © 2023 MESCIUS USA, Inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.