We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Uncaught TypeError: Cannot read property 'ej2Instances' of undefined

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"){
            if (this.$refs.grid.ej2Instances.columns[i].type === "date") {
                this.$refs.grid.ej2Instances.columns[i].format = { type: "date", format: "dd/MM/yyyy" };
"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"

1 Reply

HJ Hariharan J V Syncfusion Team June 19, 2019 08:06 AM

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, 

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-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> 

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. 


Live Chat Icon For mobile
Up arrow icon