Exporting grid with aggregates to Excel throws error

Question

See attached demo.The following error is thrown when exporting to Excel:excel-export.js?a198:757 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'toLowerCase')    at ExcelExport.aggregateStyle (excel-export.js?a198:757)    at ExcelExport.fillAggregates (excel-export.js?a198:700)    at ExcelExport.processAggregates (excel-export.js?a198:626)    at ExcelExport.processGroupedRows (excel-export.js?a198:470)    at ExcelExport.processRecordContent (excel-export.js?a198:369)    at ExcelExport.processGridExport (excel-export.js?a198:355)    at eval (excel-export.js?a198:235)    at new Promise (<anonymous>)    at ExcelExport.processInnerRecords (excel-export.js?a198:233)    at eval (excel-export.js?a198:160)Attachment: SyncFusion_19.3_Grid_Footer_Pdf_178ffff8.zip

Rajapandiyan Settu · Answer

Hi Bill, 

Thanks for contacting Syncfusion support. 

We can reproduce the reported behavior in the given sample. By analyzing your code, we found that you are using “items” field in your dataSource. This is the cause of reported behavior. 
 
In EJ2 Grid, we performed some Grid operations based on this predefined key – “items”. So, it conflicts with the items field used in your dataSource. 
 
We suggest you to change the field name to resolve this problem. Find the modified code example and sample for your reference. 
 




 
[App.vue] 
 
export default { 
  name: "Grid", 
  data() { 
    return { 
      height: 200, 
      rows: [ 
        { 
          name: "John Doe", 
          location: "London", 
          itemsCount: 5, 
          price: 10 
        }, 
        { 
          name: "Jane Smith", 
          location: "Paris", 
          itemsCount: 3, 
          price: 6 
        } 
      ], 
    } 
  }, 
  computed: { 
    columns() { 
      return [ 
        { 
          field: "name", 
          headerText: "Name" 
        }, 
        { 
          field: "location", 
          headerText: "Location", 
          visible: false 
        }, 
        { 
          field: "itemsCount", 
          headerText: "Items", 
          type: 'number' 
        }, 
        { 
          field: "price", 
          headerText: "Price", 
          type: 'number' 
        }, 
      ] 
    }, 
 } 
} 
 
 
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncFusion_19.3_Grid_Footer_Pdf-739840016.zip 
 
Please get back to us if you need further assistance with this. 

Regards, 
Rajapandiyan S

Bill Naples · Answer

Thank you Rajapandiyan for the reply and investigation.

I verified changing the 'items' column key resolves the error.

Interestingly, using the following patch to catch the error, bypasses it. The excel exports fine.

const excelAggregateStyle = ExcelExport.prototype.aggregateStyle
ExcelExport.prototype.aggregateStyle = function () {
  try {
    excelAggregateStyle.apply(this, arguments)
  } catch (error) {
    console.warn(`Error in ExcelExport.prototype.aggregateStyle: ${error}`, error)
  }
}

Rajapandiyan Settu · Answer

Hi Bill, 

Thanks for your update. 

By using your workaround you can avoid the exception on excel export. But when you using predefined key (items) in the Grid’s dataSource, the type of column is not applied properly. Because we have performed some Grid operations based on this predefined key – “items”. So it leads some issue on Filtering, Sorting, Formatting, Exporting, etc.,  

The provided workaround only resolves the exception on excel export. We suggest you to change the field name to avoid such case of issue since the item key is a predefined value of Grid Component. 
   
Please get back to us if you need further assistance. 

Regards, 
Rajapandiyan S

Bill Naples · Answer

Thank you Rajapandiyan.

Rajapandiyan Settu · Answer

Hi Bill, 

You’re welcome. 
 
Please get back to us if you need any assistance. 

Regards, 
Rajapandiyan S