TypeError: Cannot read property 'toString' of null

[Fan Zhang]

I use the Binding Gantt with data Sample:

<template>
    <div>
       <ejs-gantt ref='gantt' :dataSource="data"></ejs-gantt>
   </div>
</template>
<script> import Vue from "vue"; import { GanttPlugin } from "@syncfusion/ej2-vue-gantt"; Vue.use(GanttPlugin); export default { data: function() { return{ data: [ { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), subtasks: [ { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 }, { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 }, { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 }, ] }, { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), subtasks: [ { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }, { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }, { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 } ] }, ], }; }, }; </script>

But got the error :

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'toString' of null"

found in

---> <GanttComponent>
       <DlgMYGantt> at src/components/modal/report/DlgMYGantt.vue
         <DraggleDialog> at src/common/dialog/DraggleDialog.vue
           <MainContent> at src/views/MainContent.vue
             <App> at src/App.vue
               <Root>

and

TypeError: Cannot read property 'toString' of null
    at TaskProcessor../node_modules/@syncfusion/ej2-gantt/src/gantt/base/task-processor.js.TaskProcessor.createRecord (app.js:248206)
    at TaskProcessor../node_modules/@syncfusion/ej2-gantt/src/gantt/base/task-processor.js.TaskProcessor.prepareRecordCollection (app.js:248042)
    at TaskProcessor../node_modules/@syncfusion/ej2-gantt/src/gantt/base/task-processor.js.TaskProcessor.prepareDataSource (app.js:248006)
    at TaskProcessor../node_modules/@syncfusion/ej2-gantt/src/gantt/base/task-processor.js.TaskProcessor.cloneDataSource (app.js:247960)
    at TaskProcessor../node_modules/@syncfusion/ej2-gantt/src/gantt/base/task-processor.js.TaskProcessor.checkDataBinding (app.js:247884)
    at Gantt../node_modules/@syncfusion/ej2-gantt/src/gantt/base/gantt.js.Gantt.render (app.js:245137)
    at Gantt../node_modules/@syncfusion/ej2-gantt/node_modules/@syncfusion/ej2-base/src/component.js.Component.appendTo (app.js:51811)
    at VueComponent../node_modules/@syncfusion/ej2-vue-gantt/node_modules/@syncfusion/ej2-vue-base/src/component-base.js.ComponentBase.mounted (app.js:681443)
    at invokeWithErrorHandling (app.js:829870)
    at callHook (app.js:832230)

Thanks

[Pooja Priya Krishna Moorthy]

Hi Fan, 

Thanks for sharing the code snippet. 

We are able to reproduce the error with the code snippet shared by you.  

To bind data source, we need to define taskFields property as like below code example. 

<ejs-gantt ref='gantt' 

       :dataSource="data" 

       :taskFields = "taskFields"> 

</ejs-gantt> 

export default { 

    data: function() { 

        return{ 

            taskFields: { 

                id: 'TaskID', 

                //… 

            }, 

        } 

}, 

}; 

Sample – https://codesandbox.io/s/vue-template-forked-65ggl?file=/src/App.vue 

Documentation – https://ej2.syncfusion.com/vue/documentation/gantt/getting-started/#binding-gantt-with-data 

Please get back to us if you require further assistance on this. 

Regards, 

Pooja K.