Error while trying to use Vue 3.0 Pivot Table

[Madhukar Prabhakara]

We get the following error when trying to use Vue 3.0 Pivot Table. Also, can someone please provide us with this latest Vue 3.0 documentation?

Uncaught TypeError: Object prototype may only be an Object or null: undefined

    at setPrototypeOf (<anonymous>)

    at extendStatics (webpack:///./node_modules/@syncfusion/ej2-vue-base/src/component-base.js?:19)

    at __extends (webpack:///./node_modules/@syncfusion/ej2-vue-base/src/component-base.js?:22)

    at eval (webpack:///./node_modules/@syncfusion/ej2-vue-base/src/component-base.js?:59)

    at eval (webpack:///./node_modules/@syncfusion/ej2-vue-base/src/component-base.js?:446)

    at Module../node_modules/@syncfusion/ej2-vue-base/src/component-base.js (app-vue.js:8401)

    at __webpack_require__ (app-vue.js:20)

    at eval (webpack:///./node_modules/@syncfusion/ej2-vue-base/src/index.js?:2)

    at Module../node_modules/@syncfusion/ej2-vue-base/src/index.js (app-vue.js:8425)

    at __webpack_require__ (app-vue.js:20)

[Manikandan Murugesan]

Hi Madhukar, 

We have prepared a pivot table sample using Vue 3. Please find the sample link below. 

Sample: https://www.syncfusion.com/downloads/support/forum/167083/ze/pivotvue31693561738 

For more details, kindly refer to the following Vue 3 getting started document. 

Document: https://ej2.syncfusion.com/vue/documentation/getting-started/vue3-tutorial/ 

Please let us know if you need further assistance. 

Regards, 

Manikandan 

[Madhukar Prabhakara]

Hi Manikandan,

Thank you for your reply.

We have gone through the sample code that you provided in the previous reply, and do some changes in our applications so now the pivot table is loading fine.

But we are getting the below error:

pivotview.js:2424 Uncaught TypeError: Cannot read property 'fieldListSpinnerElement' of undefined
    at Proxy.PivotView.onContentReady (pivotview.js:2424)
    at Proxy.Observer.notify (observer.js:102)
    at Proxy.Component.notify (component.js:263)
    at Proxy.Render.dataBound (render.js:318)
    at Proxy.Observer.notify (observer.js:102)
    at Proxy.Base.trigger (base.js:188)
    at eval (content-renderer.js:84)
    at eval (util.js:162)

It seems that somehow we are getting this.pivotFieldListModule as undefined in 

webpack:///./node_modules/@syncfusion/ej2-pivotview/src/pivotview/base/pivotview.js?

above file.

Are we missing something here ?

Thank you in advance

Madhu

[Manikandan Murugesan]

Hi Madhukar, 

We have analyzed the reported issue at our end. We suspect that this issue occurs due to the showFieldList property is enabled without the FieldList module being injected into the pivot table. Kindly refer the following code example. 

Code Example: 

export default { 

  name: "App", 

  components: { 

    "ejs-pivotview": PivotViewComponent 

  }, 

  provide: {pivotview: [FieldList, 

  GroupingBar, 

  CalculatedField]}, 

}; 

Sample: https://www.syncfusion.com/downloads/support/forum/167083/ze/pivotvue31693561738 

  

If the reported problem persists, please reproduce it in the provided sample and revert us (or) send your sample with reported problem reflected. This would help us to investigate the reported problem and provide the solution at the earliest. 

 

Regards, 

Manikandan 

[Madhukar Prabhakara]

Hi Manikandan,

Thanks for the quick reply.

We are injecting the FieldList module into the pivot table, then also we are the same error.

You are right we removed that FieldList module from the pivot table (From your sample code) and the error reproduced in your code as well.

So I am wondering why in my application we are getting this error.

Here I am sending you my project's pivot.vue file.

We are using the same pivot version that we have in your sample application.

Please find the attached pivot zip file for more reference.

Thanks in advance :)

Regards,

Madhu

Attachment: pivotvue_ee3252f7.zip

[Manikandan Murugesan]

Hi Madhukar, 

We have analyzed your code snippet and suspect that the reported problem occurs due to name attribute not defined in the sample. Kindly refer to the following code example. 

Code Example: 

export default { 

  name: 'App', 

  components: { 

    "ejs-pivotview": PivotViewComponent 

  }, 

  provide: {pivotview: [FieldList, 

  CalculatedField]}, 

} 

Meanwhile, we have prepared a sample by using the code snippet you have shared. 

Sample: https://www.syncfusion.com/downloads/support/forum/167083/ze/pivotvue31222357268 

  

If still the problem exists, kindly reproduce the problem in the provided sample and revert us (or) send your sample that replicating the problem. This would be helpful for us to investigate the reported problem at our end and provide the solution at the earliest. 

 

Regards, 

Manikandan 

[Madhukar Prabhakara]

Hi Manikandan,

Even applying the "name" parameter is not working, I guess the issue is because of routing. We are calling the pivot page by using the routing path and after that it is not working.

I have also reproduced this issue in your given code. I have included vue routing library and try to check and in your sample code also it is not working and giving the same error.

I am attaching the sample code here. You run it and browse "http://localhost:8080/pivot-demo" you will see that error.

Let me know if you need any help here.

Regards,

Madhu

Attachment: pivotvue31222357268_8a7ca3df.zip

[Manikandan Murugesan]

Hi Madhukar, 

 

 

We have checked the reported problem at our end, and we can be able to reproduce it. We suspect that the module injection values are not accessible properly in globally, but we need to validate this to confirm. So, we will update you further details in next week and we request your support until then.  

 

However, we recommend you inject the modules as shown like in the following code example as of now.  

 

Code Example: 

import { PivotViewComponent, PivotView,Inject, FieldList, CalculatedField } from "@syncfusion/ej2-vue-pivotview"; 

 

PivotView.Inject(FieldList, CalculatedField); 

 

 

We have prepared a sample for your reference, and you can get that from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/167083/ze/vue3demo1510410761 

 

Please let us know if you have any concerns. 

 

Regards, 

Manikandan 

[Madhukar Prabhakara]

Hi Manikandan,

Thanks for the solution.. It is working fine now. But I guess it's a patch. Let me know when we have a proper solution.

But for now, it is working fine. :)

Thank You,

Madhu

[Manikandan Murugesan]

Hi Madhukar, 

 

Thanks for the update. 

 

We will update further details in next week as we promised. We appreciate your patience until then. 

 

Regards, 

Manikandan 

[Manikandan Murugesan]

Hi Madhukar,  

   

Thanks for the patience. 

 

We have considered this as a bug “Providers are not accessible globally in Vue 3” and logged a defect report in our database. And the fix will be available in our Volume 2 SP1 release which is estimated to be rolled out at the mid of August 2021. You can track the same by using below link. 

 

https://www.syncfusion.com/feedback/27319/providers-are-not-accessible-globally-in-vue-3 

 

Please let us know if you have any concerns. 

 

Regards,  

Manikandan 

[Madhukar Prabhakara]

Hi Manikandan,

Here comes another problem with vue3 and routing.

We want to access the toolbar property of the pivot table.

We are following "https://ej2.syncfusion.com/vue/documentation/pivotview/tool-bar/ " link to set it up.

But somehow we are not getting toolbar appeared in our pivot table.

And also we are not getting any error for the same.

I am attaching the source here.

Let me know if you need more information.

Thank You,

Attachment: vue3demo_5b055154.zip

[Manikandan Murugesan]

Hi Madhukar, 

 

This issue occurs due to the “toolbar” property not defined in the pivot table. Please refer to the following code example. 

 

Code Example: 

<ejs-pivotview 

      v-if="dataSourceSettings.dataSource.length > 0" 

      :dataSourceSettings="dataSourceSettings" 

      :height="height" 

      showFieldList="showFieldList" 

      class="pd-15" 

      :allowCalculatedField="allowCalculatedField" 

      :showToolbar="showToolbar" 

      :toolbar="toolbar" 

    > 

 

 

Meanwhile, we have prepared a sample for your reference. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/167083/ze/pivot-vue-2138101099 

 

Please let us know if you have any other queries. 

 

Regards, 

Manikandan 

[Madhukar Prabhakara]

Hi Manikandan,

That works! But apart from that, I did some internal changes in our application to make every option work.

I Will let you know once it's working fine.

Thank You

Madhu

[Manikandan Murugesan]

Hi Madhukar, 

 

Please let us know if you have any other queries. We are always happy to assist you.  

   

Regards,  

Manikandan 

[Madhukar Prabhakara]

Hello Manikandan,

Facing one issue while fetching pivot reports.

It is working fine when we assign reports array directly to "args.reportName" like "args.reportName = ["Sample Report"]". But the issue comes when we assign it after API call success. So basically it is not working in a callback function.

For reproducing the issue I have put that line in "SetTimeout" So that you can check it.

And what if we want to store the Id of the report with the report name, Is it possible?

Thanks

Madhu 

Attachment: vue3demo_d084f225.zip

[Manikandan Murugesan]

Hi Madhukar, 

 

Kindly use the below code example to update the report list dynamically after the fetch request is completed. 

 

Code Example: 

updateReport() { 

      let reportCollection = []; 

      let reportList = []; 

      if ( 

        localStorage.pivotviewReports && 

        localStorage.pivotviewReports !== "" 

      ) { 

        reportCollection = JSON.parse(localStorage.pivotviewReports); 

      } 

      reportCollection.map(function (item) { 

        reportList.push(item.reportName); 

      }); 

      let pivotObj = this.$refs.pivotview.ej2Instances; 

      // Here you can refresh the report list by feeding updated datsource fetched from your DB. 

      var reportListObj = document.querySelector( 

        "#" + pivotObj.element.id + "_reportlist" 

      ).ej2_instances; 

      if (reportListObj) { 

        reportListObj[0].dataSource = reportList; 

        reportListObj[0].value = pivotObj.toolbarModule.currentReport; 

      } 

    }, 

 

Sample: https://codesandbox.io/s/nifty-gagarin-lre8o?file=/src/components/HelloWorld.vue 

  

Please let us know if you have any concerns. 

 

Regards,  

Manikandan 

[Madhukar Prabhakara]

Hello Manikandan,

I don't want to put a button and on a click of it get all reports, I want to do it in fetch.

Below is our scenario:

When the page loads fetch event of pivot view will call and it will do one API call to get all report names from the server.

When we get all the reports we are assigning them to pivot view dropdown using "args.reportName = reports". But as it is API call's callback somehow it is not assigning them to dropdown and dropdown remains empty all the time.

So after that i applied your solution and put below

let pivotObj = this.$refs.pivotview.ej2Instance

var reportListObj = document.querySelector( 

        "#" + pivotObj.element.id + "_reportlist" 

      ).ej2_instances; 

      if (reportListObj) { 

        reportListObj[0].dataSource = reportList; 

        reportListObj[0].value = pivotObj.toolbarModule.currentReport; 

      } 

snippet after "args.reportName = reports" line.

But I am getting "this.$refs" as a blank object, so it is not able to find pivot view object inside it and throws errors like "Cannot read property 'ej2Instance' of undefined"

Let me know if need any more info from my side!

Thank You,

Madhu

[Madhukar Prabhakara]

Hello Manikandan,

Don't look into that issue! I have solved it using

https://www.syncfusion.com/forums/145355/uncaught-typeerror-cannot-read-property-ej2instances-of-undefined

Link

Thank You,

Madhu

[Sastha Prathap Selvamoorthy]

Hi Madhukar, 

Thanks for the update. Please let us know if need any further assistance. 

Regards, 

Sastha Prathap S. 

[Madhukar Prabhakara]

Hello Manikandan,

I have a question regarding the field list.

Can we not put the same field in the column section or row section as well as in the value section?

Thanks

Ronak

[Manikandan Murugesan]

Hi Madhukar, 

Yes. We cannot to use the same field in more than one axis. This is an actual behavior in the pivot table component. However, you can create custom calculated field by using the specific field to use it again in the value axis. Please refer the following sample. 

 

Sample: https://codesandbox.io/s/bold-ardinghelli-vuk18?file=/src/components/HelloWorld.vue 

Please let us know if you have any concerns. 

Regards, 

Manikandan 

[Madhukar Prabhakara]

Hi Manikandan,

I achieved that using the onDropChange event of the field list.

I am facing another issue, when I am trying to use the "PercentageOfDifferenceFrom" type in the aggregation value field, I am not getting anything in the "Base Item" dropdown under the "Value field settings" popup. It only shows "Nan" in the dropdown, It should show all the row's labelName I believe.

One more thing you should know is, It is only happening with string type and only in our application.

I have checked in your sample code using our data source it is working fine.

Below is the data source settings:

{"data":{"pivot_name":"Test 4","settings_json":{"dataSource":[],"expandAll":false,"values":[{"name":"Scholarship_Amount","caption":"Scholarship_Amount","baseField":"country","baseItem":"NaN","isCalculatedField":false,"isNamedSet":false,"showNoDataItems":false,"showSubTotals":true,"type":"PercentageOfDifferenceFrom","showFilterIcon":true,"showSortIcon":true,"showRemoveIcon":true,"showValueTypeIcon":true,"showEditIcon":true,"allowDragAndDrop":true}],"filters":[],"formatSettings":[{"name":"Id","format":"","type":"","useGrouping":false},{"name":"Entry_date","format":"","type":"","useGrouping":false},{"name":"Entry_Year","format":"","type":"","useGrouping":false},{"name":"Entry_Month","format":"","type":"","useGrouping":false},{"name":"Entry_Quarter","format":"","type":"","useGrouping":false},{"name":"Entry_Sami_Annual","format":"","type":"","useGrouping":false},{"name":"Beneficiary_Id","format":"","type":"","useGrouping":false},{"name":"id","format":"","type":"","useGrouping":false},{"name":"Applicant_First_Name","format":"","type":"","useGrouping":false},{"name":"Applicant_Last_Name","format":"","type":"","useGrouping":false},{"name":"Duplicated_Applicant_Last_Name","format":"","type":"","useGrouping":false},{"name":"Gender","format":"","type":"","useGrouping":false},{"name":"Status","format":"","type":"","useGrouping":false},{"name":"Aplicant_Email","format":"","type":"","useGrouping":false},{"name":"Duplicated_Aplicant_Email","format":"","type":"","useGrouping":false},{"name":"country","format":"","type":"","useGrouping":false},{"name":"Scholarship_Awarded","format":"","type":"","useGrouping":false},{"name":"Scholarship_Amount","format":"","type":"","useGrouping":false},{"name":"Education_Level","format":"","type":"","useGrouping":false},{"name":"Number","format":"","type":"","useGrouping":false},{"name":"Currency","format":"","type":"","useGrouping":false}],"providerType":"Relational","mode":"Local","type":"JSON","localeIdentifier":1033,"excludeFields":[],"allowLabelFilter":false,"allowValueFilter":false,"allowMemberFilter":true,"enableSorting":true,"rows":[{"name":"country","caption":"country","isCalculatedField":false,"isNamedSet":false,"showNoDataItems":false,"showSubTotals":true,"type":"Count","showFilterIcon":true,"showSortIcon":true,"showRemoveIcon":true,"showValueTypeIcon":true,"showEditIcon":true,"allowDragAndDrop":true}],"columns":[],"filterSettings":[],"sortSettings":[],"drilledMembers":[],"valueSortSettings":{"headerDelimiter":".","sortOrder":"None"},"valueAxis":"column","calculatedFieldSettings":[],"fieldMapping":[],"showSubTotals":true,"showRowSubTotals":true,"showColumnSubTotals":true,"showGrandTotals":true,"showRowGrandTotals":true,"showColumnGrandTotals":true,"showHeaderWhenEmpty":true,"alwaysShowValueHeader":false,"conditionalFormatSettings":[],"groupSettings":[],"showAggregationOnValueField":true,"authentication":{}}}}

Data Source:

[{"Id":5,"Entry_date":"2019-02-13","Entry_Year":2019,"Entry_Month":"2019-02","Entry_Quarter":"Q1-2019","Entry_Sami_Annual":"S1-2019","Beneficiary_Id":"","id":"653091","Applicant_First_Name":"Issie","Applicant_Last_Name":"Kegley","Duplicated_Applicant_Last_Name":"","Gender":"Female","Status":"Graduated","Duplicated_Aplicant_Email":"","country":"Pakistan","Scholarship_Awarded":"YES","Scholarship_Amount":"400","Education_Level":"High School","Number":"","Currency":""},{"Id":6,"Entry_date":"2019-02-13","Entry_Year":2019,"Entry_Month":"2019-02","Entry_Quarter":"Q1-2019","Entry_Sami_Annual":"S1-2019","Beneficiary_Id":"","id":"653066","Applicant_First_Name":"Jessi","Applicant_Last_Name":"Keenleyside","Duplicated_Applicant_Last_Name":"","Gender":"Female","Status":"Graduated","Duplicated_Aplicant_Email":"","country":"India","Scholarship_Awarded":"YES","Scholarship_Amount":"250","Education_Level":"High School","Number":"","Currency":""},{"Id":7,"Entry_date":"2019-02-13","Entry_Year":2019,"Entry_Month":"2019-02","Entry_Quarter":"Q1-2019","Entry_Sami_Annual":"S1-2019","Beneficiary_Id":"","id":"653069","Applicant_First_Name":"Tommie","Applicant_Last_Name":"Molineux","Duplicated_Applicant_Last_Name":"","Gender":"Female","Status":"Graduated","Duplicated_Aplicant_Email":"","country":"India","Scholarship_Awarded":"YES","Scholarship_Amount":"250","Education_Level":"Primary Education","Number":"","Currency":""},{"Id":8,"Entry_date":"2019-02-13","Entry_Year":2019,"Entry_Month":"2019-02","Entry_Quarter":"Q1-2019","Entry_Sami_Annual":"S1-2019","Beneficiary_Id":"","id":"653076","Applicant_First_Name":"Kirstin","Applicant_Last_Name":"Alldritt","Duplicated_Applicant_Last_Name":"","Gender":"Female","Status":"Graduated","Duplicated_Aplicant_Email":"","country":"Pakistan","Scholarship_Awarded":"YES","Scholarship_Amount":"450","Education_Level":"Primary Education","Number":"","Currency":""},{"Id":9,"Entry_date":"2019-02-13","Entry_Year":2019,"Entry_Month":"2019-02","Entry_Quarter":"Q1-2019","Entry_Sami_Annual":"S1-2019","Beneficiary_Id":"","id":"653072","Applicant_First_Name":"Kelcie","Applicant_Last_Name":"Hatrey","Duplicated_Applicant_Last_Name":"","Gender":"Female","Status":"Graduated","Duplicated_Aplicant_Email":"","country":"India","Scholarship_Awarded":"YES","Scholarship_Amount":"250","Education_Level":"Primary Education","Number":"","Currency":""},{"Id":10,"Entry_date":"2019-02-13","Entry_Year":2019,"Entry_Month":"2019-02","Entry_Quarter":"Q1-2019","Entry_Sami_Annual":"S1-2019","Beneficiary_Id":"","id":"653047","Applicant_First_Name":"Mame","Applicant_Last_Name":"Dyshart","Duplicated_Applicant_Last_Name":"","Gender":"Female","Status":"Drop-out","Duplicated_Aplicant_Email":"","country":"Pakistan","Scholarship_Awarded":"YES","Scholarship_Amount":"2225","Education_Level":"Primary Education","Number":"","Currency":""},{"Id":11,"Entry_date":"2019-02-13","Entry_Year":2019,"Entry_Month":"2019-02","Entry_Quarter":"Q1-2019","Entry_Sami_Annual":"S1-2019","Beneficiary_Id":"","id":"653272","Applicant_First_Name":"Stillman","Applicant_Last_Name":"Lober","Duplicated_Applicant_Last_Name":"","Gender":"Male","Status":"Drop-out","Duplicated_Aplicant_Email":"","country":"India","Scholarship_Awarded":"NO","Scholarship_Amount":"250","Education_Level":"Primary Education","Number":"","Currency":""},{"Id":12,"Entry_date":"2019-02-13","Entry_Year":2019,"Entry_Month":"2019-02","Entry_Quarter":"Q1-2019","Entry_Sami_Annual":"S1-2019","Beneficiary_Id":"","id":"653418","Applicant_First_Name":"Ambrosi","Applicant_Last_Name":"Forman","Duplicated_Applicant_Last_Name":"","Gender":"Male","Status":"Graduated","Duplicated_Aplicant_Email":"","country":"El Salvador","Scholarship_Awarded":"YES","Scholarship_Amount":"450","Education_Level":"Primary Education","Number":"","Currency":""},{"Id":13,"Entry_date":"2019-02-13","Entry_Year":2019,"Entry_Month":"2019-02","Entry_Quarter":"Q1-2019","Entry_Sami_Annual":"S1-2019","Beneficiary_Id":"","id":"653170","Applicant_First_Name":"Lanie","Applicant_Last_Name":"Gailor","Duplicated_Applicant_Last_Name":"","Gender":"Female","Status":"Graduated","Duplicated_Aplicant_Email":"","country":"Tanzania","Scholarship_Awarded":"YES","Scholarship_Amount":"3175","Education_Level":"University/College","Number":"","Currency":""},{"Id":14,"Entry_date":"2019-02-13","Entry_Year":2019,"Entry_Month":"2019-02","Entry_Quarter":"Q1-2019","Entry_Sami_Annual":"S1-2019","Beneficiary_Id":"","id":"653149","Applicant_First_Name":"Marcus","Applicant_Last_Name":"Varfolomeev","Duplicated_Applicant_Last_Name":"","Gender":"Male","Status":"Graduated","Duplicated_Aplicant_Email":"","country":"Philippines","Scholarship_Awarded":"YES","Scholarship_Amount":"175","Education_Level":"University/College","Number":"","Currency":""}]

Let me know if you need anything else

I am playing with "country" field.

Thank You

Madhu

[Madhukar Prabhakara]

One Update.. After debugging into pivot js.. we come to know that we are  getting the "NaN" object only for all the string fields in "this.parent.engineModule.fieldList"

Here in this image, you can see we are getting "formattedMembers" with only one property that is "NaN" under the country row.

I guess this will help you to find the solution.

[Manikandan Murugesan]

Hi Madhukar, 

 

We've analyzed the issue and suspect it's due to the invalid format set to “country” field in formatSettings. Meanwhile, we have prepared a sample by using your configuration. Please find it from below link. 

 

Sample: https://codesandbox.io/s/keen-andras-hcjni?file=/src/components/HelloWorld.vue 

 

Screenshot: 

 

 

 

Please let us know if you have any concerns. 

Regards, 

Manikandan 

[Madhukar Prabhakara]

Hello Manikandan,

We know that but we have to put that blank string "" intentionally in formatSetting. If we wont put that, it will give below error.

intl-base.js:841 Uncaught TypeError: format.split is not a function

at Object.customFormat (intl-base.js:841)

at Function.NumberParser.numberParser (number-parser.js:43)

at Internationalization.getNumberParser (internationalization.js:133)

at ValueFormatter.getParserFunction (value-formatter.js:31)

at new Column (column.js:153)

at prepareColumns (util.js:414)

at Proxy.Grid.updateColumnObject (grid.js:3986)

at Proxy.Grid.refreshColumns (grid.js:4040)

at Proxy.Render.render (render.js:84)

at Proxy.PivotView.renderPivotGrid (pivotview.js:1707)

And nothing will load in pivot table.

SO for the workaround we passed blank strings for all the columns like below:

"formatSettings":[{"name":"Id","format":"","type":"","useGrouping":false},{"name":"Entry_date","format":"","type":"","useGrouping":false},{"name":"Entry_Year","format":"","type":"","useGrouping":false},{"name":"Entry_Month","format":"","type":"","useGrouping":false},{"name":"Entry_Quarter","format":"","type":"","useGrouping":false},{"name":"Entry_Sami_Annual","format":"","type":"","useGrouping":false},{"name":"Beneficiary_Id","format":"","type":"","useGrouping":false},{"name":"id","format":"","type":"","useGrouping":false},{"name":"Applicant_First_Name","format":"","type":"","useGrouping":false},{"name":"Applicant_Last_Name","format":"","type":"","useGrouping":false},{"name":"Duplicated_Applicant_Last_Name","format":"","type":"","useGrouping":false},{"name":"Gender","format":"","type":"","useGrouping":false},{"name":"Status","format":"","type":"","useGrouping":false},{"name":"Aplicant_Email","format":"","type":"","useGrouping":false},{"name":"Duplicated_Aplicant_Email","format":"","type":"","useGrouping":false},{"name":"country","format":"","type":"","useGrouping":false},{"name":"Scholarship_Awarded","format":"","type":"","useGrouping":false},{"name":"Scholarship_Amount","format":"","type":"","useGrouping":false},{"name":"Education_Level","format":"","type":"","useGrouping":false},{"name":"Number","format":"","type":"","useGrouping":false},{"name":"Currency","format":"","type":"","useGrouping":false}]

And if we pass some format for these columns even though it is giving the same error. 

I believe while debugging we come to know that there is some conflict of "format" keyword with JQuery. 

So, let us know what we are doing wrong here.

Thank you Manikandan for coming back to us :).

Thanks

Madhu

[Manikandan Murugesan]

Hi Madhukar, 

We have tried to reproduce the reported problem and we are unable to reproduce it at our end. Please refer to the following sample. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/167083/ze/vue3demo-394839957 

If still the problem exists, kindly reproduce the problem in the provided sample and revert us (or) send your sample that replicating the problem. This would be a helpful for us to investigate the reported problem at our end and provide the solution at earliest. 

 

Thanks, 

Manikandan. 

[Madhukar Prabhakara]

Hi Manikandan,

Please find attached code. We have reproduced that error in this attached code. Your "format" method is conflicting with one of our jquery file's (jquery.steps.js) "format" method.

Please check it and let me know if you need anything from our end.

Thanks, 

Madhu 

Attachment: vue3demo_760cc0d7.zip

[Manikandan Murugesan]

Hi Madhukar, 

 

Currently we are analyzing this at our end, and we will update further details within two business days (September 3, 2021). 

Regards, 

Manikandan 

[Manikandan Murugesan]

Hi Madhukar, 

The code highlighted below in the file "jquery.steps.js" converts the given "format" string into a function. As a result, the problem that has been reported occurs on your end. 

 

Kindly use different name instead of “format” to the method in the file "jquery.steps.js" or comment out that code to resolve this issue at your end. Meanwhile, we have modified your sample for your reference. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/167083/ze/vue3demo1686154460 

Please let us know if you have any concerns. 

Regards, 

Manikandan 

[Madhukar Prabhakara]

Hi Manikandan,

This is not the solution to our problem, it is just a patch. We can not modify anything in our JS file, we believe you have to change that function name from your side (in pivot view's files) and provide us a new pivot build?

Thanks,

Madhu

[Manikandan Murugesan]

Hi Madhukar, 

 

Currently we are analyzing this at our end, and we will update further details within two business days (September 9, 2021). 

Regards, 

Manikandan 

[Manikandan Murugesan]

Hi Madhukar 

 

We have considered this as a bug and logged a defect report in our database. And the fix will be available in our upcoming Volume 3 release which is estimated to be rolled out at the end of this month. 

 

We appreciate your patience until then. 

 

Regards, 

Manikandan 

[Manikandan Murugesan]

Hi Madhukar, 

 

We are glad to announce that our Essential Studio 2021 Volume 3 Main Release V19.3.0.43 is rolled out and fix for the reported issue has been included in this release. Kindly refer to the following sample. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/167083/ze/vue3demo-1971607938 

 

We thank you for your support and appreciate your patience in waiting for this release. Please contact us if you require any further assistance. 

 

Regards, 

Manikandan