Uncaught TypeError: Cannot read property 'ej2Instances' of undefined

[Egidio Caleiro Santoro]

Hi, I'm getting this error:

Uncaught TypeError: Cannot read property 'ej2Instances' of undefined in the dataBound function (this.$refs.grid.ej2Instances) see below.

I've added syncfusion thru npm, see dependencies below .

thank you!

Component.vue excerpt:

methods: {
      dataBound: function() {
        for (var i = 0; i < this.$refs.grid.ej2Instances.columns.length; i++) {
            if(this.$refs.grid.ej2Instances.columns[i].field === "OrderDate"){
                this.$refs.grid.ej2Instances.columns[i].type="date";
            }
            if (this.$refs.grid.ej2Instances.columns[i].type === "date") {
                this.$refs.grid.ej2Instances.columns[i].format = { type: "date", format: "dd/MM/yyyy" };
            }
        }
        this.$refs.grid.ej2Instances.refreshColumns();
    }}

package.json:

"dependencies": {
    "@syncfusion/ej2-vue-charts": "^17.1.51",
    "@syncfusion/ej2-vue-dropdowns": "^17.1.49",
    "@syncfusion/ej2-vue-grids": "^17.1.51",
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "bootstrap-vue": "^2.0.0-rc.22",
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-axios": "^2.1.4",
    "vue-router": "^3.0.3"
  }

[Hariharan J V]

Hi Egidio, 

Thanks for contacting Syncfusion support. 

We have prepared the Grid sample with dataBound event. But unfortunately the reported issue was not reproduced at our end. So we have attached that prepared sample in below link for your reference, 

Sample: https://codesandbox.io/s/vue-template-xkefc 

Note: We suspect that you did not provide the reference name properly to Grid component. So please ensure the reference name in Grid. You can provide the reference name to Grid like as below code snippet, 

<ejs-grid id="Grid" ref="grid" :dataSource="data" :allowPaging="true" :dataBound="dataBound"> 

    <e-columns> 

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

        <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column> 

        <e-column field="Freight" headerText="Freight" format="C2" width="90"></e-column> 

        <e-column field="ShipCity" headerText="Ship City" width="120"></e-column> 

    </e-columns> 

</ejs-grid> 

Still If you facing the same issue, please share your full Grid code. This will help us to provide a solution for this issue as early as possible. 

Regards, 

Hariharan