Export to Excel throws errors if a column is built with a :valueAccessor and paging is used

I need to build a fairly robust grid and if I do it without paging then my updates that call a Web 2,0 API cause memory issues and cause the browser to crash.  If I use a 12 record page then even updating 5000 values from the api is not a problem.  However.  Since one of the fields is build by concatenating a couple of other fields and adding some font colors to certain words if I try to export the grid to Excel without paging all of the record first it throws errors.  If I take out all of the html code and use just a straight text from the api then the export is fine

the code that I use is just simple html JavaScript code:

 pubInformation: function(field, data, column) {

res += "<font color='#FF6600'>Affiliations: </font>"

        if (data["Affiliation"] !== null ) {

         data["Affiliation"] = data["Affiliation"].replace( Organization,"<font color='#3366FF'>" + Organization + " </font>" )

        data["Affiliation"] = data["Affiliation"].replace("&","and" )

       if (department !== null){

          department = department.trim()

           data["Affiliation"] = data["Affiliation"].replace(department,"<font color='#3366FF'>" + department + " </font>" )

          if( department.includes("&")){

           department = department.replace("&", "and")

            data["Affiliation"] = data["Affiliation"].replace(department,"<font color='#3366FF'>" + department+" </font>" )

          }

      }

        if (email !==null){

         data["Affiliation"] = data["Affiliation"].replace(data["Email"],"<font color='#3366FF'>" + data["Email"] +" </font>" )

         }       res += data["Affiliation"]


The error is an Excel error when trying to open the file saying:  We found a problem with some content.... would you like us to try ...

Without changing one line of code but only changing my page view size to 200 and paging through each page and then exporting again- then the export is fine.

Is there a work around for this?  I can't ask my end users to be sure to page through all 5000 records before they export. 




6 Replies

MA Mohammed Ansar Sathik Ali Syncfusion Team June 15, 2022 04:39 PM UTC

Hi William,


Greetings from the Syncfusion support.


Currently we are working your query and we will update further details on June 17 2022


until then we appreciate your patience.


Regards,

Mohammed Ansar



MA Mohammed Ansar Sathik Ali Syncfusion Team June 17, 2022 03:59 PM UTC

Hi William


Query: Export to Excel throws errors if a column is built with a valueAccessor and paging is used


In response to your inquiry. When you have 5000 data with value accessor, you will encounter the problem. Because of the problem is with the value accessor, we can pass simple data in the excel export. We accomplished this by following a method.


currencyFormatter: function (field, data, column) {

      if (flag === true) {

        return "€" + data["Freight"];

      } else {

        return data["Freight"];

      }

    },

 

    toolbarClick: function (args) {

      if (args.item.id === "Grid_excelexport") {

        flag = false;

        // 'Grid_excelexport' -> Grid component id + _ + toolbar item name

        this.$refs.grid.excelExport();

      }

    },


Sample: https://codesandbox.io/s/155509--master-forked-k4dkoz


Please get back to us if you need further assistance on this.


Regards,

Mohammed Ansar



WM William Morgenweck June 17, 2022 04:08 PM UTC

So if I built the HTML data from my Web Server API and have all of the HTML Code there will that make it better?


When I first started using your components I asked if there was any file size limitation to export to Excel and I was assured that the only limitation was with Excel


I am currently neck deep with developing an application for US Cancer Centers and really need to know the limitations of the datagrid.  Who can I talk to?



MA Mohammed Ansar Sathik Ali Syncfusion Team June 21, 2022 06:27 AM UTC

Hi William,


Query #1: if I built the HTML data from my Web Server API and have all of the HTML Code there will that make it better? & Query #2: if there was any file size limitation to export to Excel and I was assured that the only limitation was with Excel


For Query #1 and Query #2, we are investigating these queries with our relevant team and we will update further details on June 23, 2022.


Query 3: need to know the limitations of the DataGrid


Before proceeding this query, we need to know that you are used the grid features details to us that will help to check/update the features combination of limitation so, please share complete rendering Grid code example or sample. If you share us the details it will help us to validate this query efficiently.


Regards,

Mohammed Ansar



WM William Morgenweck June 21, 2022 01:05 PM UTC

First let me say you have a great component and you folks work to make it better.  With that said I need to produce output that can look like



Excel10.PNG

In the past for datasets with about 200-500 records I would use the value accessor because it was convenient.  But since I have control on this datasource with my own web server I'm making 4 or 5 other web api calls from the server and pushing down completed html code so for this I only need is the ability to view HTML markup using :disableHtmlEncode="false".  I'm "assuming" that it makes it easier to export to Excel since it does not have to go through the value Accessor and that the ValueAccessor is a on demand function (?)I did find that without paging my system would run out of memory and my system has 64Gig   See Server HTML code in attachment



Attachment: SampleCode_294a02f2.zip


MA Mohammed Ansar Sathik Ali Syncfusion Team June 23, 2022 04:02 AM UTC

Hi William,


Query: Need to excel export 500 record with  ValueAccessor.


Based on your query. we suspect that you are render all the data in one page without using the paging. so can you please provide us the details that you are using the properties like Virtualization or infinite scrolling. If you are not using the properties we suggest you to use the properties. You also mentioned the export is success while using paging. You also use the web API method for the data. So we have the custom binding option.


We have suggested you use the custom-binding feature to achieve your requirement. Before that, we would like to share the behavior of custom-binding in EJ2 Grid.


For every grid actions(such as FilterPage, etc.,), we have triggered the dataStateChange event and, in that event arguments we have send the corresponding action details(like skip, take, filter field, value, sort direction, etc.,) based on that, you can perform the action in your service and return the data as a result and count object. 


dataStateChange: https://ej2.syncfusion.com/vue/documentation/api/grid/#datastatechange


Note: ‘dataStateChange’ event is not triggered at the Grid initial render. If you are using a remote service, you need to call your remote service by manually with a pagination query (need to set skip value as 0 and take value based on your pageSize of pageSettings in Grid. For infinite scrolling we need to send 3 times of pageSize as take query ) in ngOnInit. Please return the result like as “{result: […], count: …}” format
to Grid.


dataSourceChanged’ event is triggered when performing CRUD action in Grid. You can perform the CRUD action in your service using action details from this event and, you need to call the endEdit method to indicate the completion of save operation.


dataSourceChanged: https://ej2.syncfusion.com/vue/documentation/api/grid/#datastatechange


Custom-binding: https://ej2.syncfusion.com/vue/documentation/grid/data-binding/data-binding/#custom-binding

  

Demo: https://ej2.syncfusion.com/vue/demos/#/bootstrap5/grid/infinite-scrolling.html


Please get back to us if you need further assistance on this.


Regards,

Mohammed Ansar



Loader.
Up arrow icon