Cannot create property 'name' on string 'Format options or type given must be invalid

[Steven]

            <ejs-grid ref='grid'

            :dataSource="data"

            :allowPaging='true'

            :allowSorting='true'

            :allowTextWrap='true'

            :dataBound='dataBound'

            :pageSettings='pageSettings'

            :sortSettings='initialSort'

            :commandClick='commandClick'

            :toolbar='toolbarOptions' 

            :toolbarClick='toolbarClick' 

            :allowPdfExport='true'

            :pdfHeaderQueryCellInfo="pdfHeaderQueryCellInfo"

            :allowExcelExport='true'>

              <e-columns>

                <e-column field='id' type='number' :isPrimaryKey='true' :visible='false'></e-column>

                <e-column headerText='JOURNAL' field='journal_id'></e-column>

                <e-column headerText='ACCOUNT NO' field='account_no'></e-column>

                <e-column headerText='CONTACT' field='name'></e-column>

                <e-column headerText='KEY CODE' field='key_code'></e-column>

                <e-column headerText='TYPE' field='type'></e-column>

                <e-column headerText='DOC NO' field='doc_no'></e-column>

                <e-column headerText='DOC DATE' field='doc_date' format='dd-MM-yyyy' type='date'></e-column>

                <e-column headerText='DUE DATE' field='due_date' format='dd-MM-yyyy' type='date'></e-column>

                <e-column headerText='ITEM NAME' field='itemName'></e-column>

                <e-column headerText='M.DOC NO' field='m_doc_no'></e-column>

                <e-column headerText='M.DOC DATE' field='m_doc_date' format='dd-MM-yyyy' type='date'></e-column>

                <e-column headerText='PAYABLE' field='payable' textAlign="right"></e-column>

                <e-column headerText='BALANCE' field='balance' textAlign="right"></e-column>

                <e-column headerText='STATUS' field='status'></e-column>

                <e-column headerText='Commands' :commands='commands'></e-column>

              </e-columns>

              <e-aggregates>

                <e-aggregate>

                    <e-columns>

                        <e-column type="Sum" field="payable" format='#.00;(#.00)' textAlign="right" :footerTemplate ='footerSum'></e-column>

                        <e-column type="Sum" field="balance" format='#.00;(#.00)' textAlign="right" :footerTemplate ='footerSum'></e-column>

                    </e-columns>

                </e-aggregate>

              </e-aggregates>

            </ejs-grid>

Here is the code for my grid table. When I try to export pdf, it can print out with empty data, however, when there come with data, it has error like this.

Can please help?

[Steven]

It is the type="data" format issue. If I remove the "format" attribute, it then leave only the first error.

What is this error mean?

[Steven]

For type="data" format issue, need to change
from:
format="dd-MM-yyyy"

to
:customFormat="{ type:'date', format:'dd-MM-yyyy'}"

However, for the issue "pdf-export.js?c2da:143 Uncaught (in promise)", I have really no idea. 

Can please help?

[Steven]

The issue "pdf-export.js?c2da:143 Uncaught (in promise)" is due to the two footer at the bottom... Can I know how to fix this?

[Steven]

Ok, issue found. It is aggregate problem with custom template. Please help to suggest a fix. Thanks.

[Manivel Sellamuthu]

Hi Steven, 

Greetings from Syncfusion support. 

We have prepared a sample based on the shared code example and PDF Export is working fine with the number formatting and aggregates. Please refer the below code example and sample for more information. 

<template> 

  <div id="app"> 

    <ejs-grid 

      :dataSource="data" 

      :allowPaging="true" 

      ref="grid" 

      :toolbar="toolbar" 

      :toolbarClick="toolbarClick" 

      :allowPdfExport="true" 

      :allowTextWrap="true" 

      :pageSettings="pageOption" 

    > 

      <e-columns> 

        <e-column field="OrderID" headerText="Order ID" width="150"></e-column> 

. . . 

        ></e-column> 

      </e-columns> 

      <e-aggregates> 

        <e-aggregate> 

          <e-columns> 

            <e-column 

              type="Sum" 

              field="Freight" 

              format="N2" 

              :footerTemplate="sumTemplate" 

            > 

            </e-column> 

          </e-columns> 

        </e-aggregate> 

        <e-aggregate> 

          <e-columns> 

            <e-column 

              type="Average" 

              field="Freight" 

              format="N2" 

              :footerTemplate="avgTemplate" 

            > 

            </e-column> 

          </e-columns> 

        </e-aggregate> 

      </e-aggregates> 

    </ejs-grid> 

  </div> 

</template> 

<script> 

. . . 

export default { 

  data: () => { 

    return { 

      data: data.slice(0, 16), 

      pageOption: { pageSize: 8 }, 

      toolbar: ["PdfExport"], 

      sumTemplate: function () { 

        return { 

          template: Vue.component("sumTemplate", { 

            template: `<span>Sum: {{data.Sum}}</span>`, 

            data: function () { 

              return { data: { data: {} } }; 

            }, 

          }), 

        }; 

      }, 

      avgTemplate: function () { 

        return { 

          template: Vue.component("avgTemplate", { 

            template: `<span>Average: {{data.Average}}</span>`, 

            data: function () { 

              return { data: { data: {} } }; 

            }, 

          }), 

        }; 

      }, 

    }; 

  }, 

  methods: { 

    toolbarClick: function (args) { 

      if (args.item.text === "PDF Export") { 

        this.$refs.grid.pdfExport(); 

      } 

    }, 

  }, 

  provide: { 

    grid: [Aggregate, Page, Toolbar, PdfExport], 

  }, 

}; 

</script> 

<style> 

@import https://cdn.syncfusion.com/ej2/material.css; 

</style> 

Sample: https://codesandbox.io/s/167191-sample-jrpd5?file=/src/App.vue:1157-1168 

For number formatting we suggest you to use N, C, P respective to denote the number, currency  and percentage. Please refer the below documentation link for more information. 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/columns/#number-formatting 

If you still faced the issue, please the below details to proceed further 

1. Share the Grid events code and template code for aggregates
2. Please try to replicate the reported issue in our given sample
3. Please share the issue reproducible sample , if possible
4. Share the screenshot or video demonstration of the issue

Regards, 

Manivel