Exporting grid with aggregates to Excel throws error

[Bill Naples]

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]

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]

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]

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]

Thank you Rajapandiyan.

[Rajapandiyan Settu]

Hi Bill, 

You’re welcome. 

 

Please get back to us if you need any assistance. 

Regards, 

Rajapandiyan S