Gantt Chart draggable error

[patrick]

I got the error "Uncaught TypeError: Cannot read property 'replace' of undefined" after modifying gantt chart by drag and drop. 

Provided some gantt chart Setting below. Hope they are useful. Please advice. Thanks. 

<template>

    <ejs-gantt 

        ref="gantt"

        :dataSource="dataSource" 

        id="Ganttcontainer"

        :key="componentKey"

        :taskFields ="taskFields" 

        :height ="height" 

        :enablePredecessorValidation="true"

        dateFormat="dd-MM-y"

        :includeWeekend="true"

        taskMode="Auto"

        :rowSelected="rowSelected"

        :tooltipSettings="tooltipSettings"

        :allowReordering="true"

        :rowDataBound="rowDataBound"

        :queryTaskbarInfo="queryTaskbarInfo"

        :labelSettings="labelSettings"

        :projectStartDate="startDate" 

        :projectEndDate="endDate"

        :allowSorting="true"

        :allowResizing="true"

        :toolbar="toolbar"

        :timelineSettings="timelineSettings"

        :highlightWeekends="true"

        :allowSelection="true"

        :locale="locale"

        :editSettings="editSettings"

        >

            <e-columns v-if="mode==='NewPlan'">

                <e-column field= 'id' :headerText="t.Lbl.id" width='90' :allowReordering="false">e-column>

                <e-column field= 'LineName' :headerText="t.Lbl.name" width='150'>e-column>

                <e-column field= 'LineDesc' :headerText="t.Lbl.description" width='150'>e-column>

                <e-column field= 'PIC' :headerText="t.Title.owner" width='100'>e-column>

                <e-column field= 'Addr' :headerText="t.Title.location" width='150'>e-column>

                <e-column field= 'DateStart' :headerText="t.Title.startdate" width='150'>e-column>

                <e-column field= 'DateEnd' :headerText="t.Title.enddate" width='150'>e-column>

                <e-column field= 'duration' :headerText="t.Title.duration" width='150' >e-column>

                <e-column field= 'dependencies' :headerText="t.Title.dependencies" width='150' >e-column>

            e-columns>

            <e-columns v-if="mode==='SNC'">

                <e-column field= 'LineNum' :headerText="t.Lbl.number" width='170' :allowReordering="false">e-column>

                <e-column field= 'LineName' :headerText="t.Lbl.name" width='150'>e-column>

                <e-column field= 'LineDesc' :headerText="t.Lbl.description" width='150'>e-column>

                <e-column field= 'progress' :headerText="t.Lbl.jobprogress" width='90' >e-column>

                <e-column field= 'Owner' :headerText="t.Title.owner" width='100'>e-column>

                <e-column field= 'DateStart' :headerText="t.Title.startdate" width='150'>e-column>

                <e-column field= 'DateEnd' :headerText="t.Title.enddate" width='150'>e-column>

                <e-column field= 'dependencies' :headerText="t.Title.dependencies" width='150' >e-column>

            e-columns>

            <e-columns v-if="mode==='default'">

                <e-column field= 'id' :headerText="t.Lbl.id" width='90' :allowReordering="false">e-column>

                <e-column field= 'LineName' :headerText="t.Lbl.name" width='150'>e-column>

                <e-column field= 'LineDesc' :headerText="t.Lbl.description" width='150'>e-column>

                <e-column field= 'PIC' :headerText="t.Title.owner" width='100'>e-column>

                <e-column field= 'Addr' :headerText="t.Title.location" width='150'>e-column>

                <e-column field= 'DateStart' :headerText="t.Title.startdate" width='150'>e-column>

                <e-column field= 'DateEnd' :headerText="t.Title.enddate" width='150'>e-column>

                <e-column field= 'duration' :headerText="t.Title.duration" width='150' >e-column>

                <e-column field= 'dependencies' :headerText="t.Title.dependencies" width='150' >e-column>

            e-columns>

    ejs-gantt>

template>

  provide: {

    gantt: [ DayMarkers, Edit, Filter, Sort, Selection, Reorder, Resize, ContextMenu, Sort, Toolbar ]

  },

  data: function() {

    return {

            componentKey:0,

            viewType:"ResourceView",

            height: '750px',

            taskFields: {

                id: 'ganttID',

                startDate: 'DateStart',

                endDate: 'DateEnd',

                duration: 'duration',

                progress: 'progress',

                Description: 'LineDesc',

                dependency: 'ganttDependencies',

                child: 'subTasks',

                isMilestone: 'isMilestone',

                progress:'progress'

            },

            tooltipSettings:{

                showTooltip:false

            },

            locale:"Test",

            selectedRow:0,

            rowDataBound: function (args) {

             if(args.data.taskData.isMilestone == true)

                args.row.style.backgroundColor="#FFD4A6"

             },

            queryTaskbarInfo: function(args) {

                if(args.data.taskData.isMilestone == true){

                    args.rowElement.style.backgroundColor = "#FFD4A6";

                }

                if (args.data.hasChildRecords == true) {

                    args.taskbarBgColor = "#FCBF74";

                    args.taskbarBorderColor = "#FCBF74";

                    args.progressBarBgColor = "#FF9621";

                } else {

                    args.taskbarBgColor = "#C9C9C9";

                    args.taskbarBorderColor = "#C9C9C9";

                    args.progressBarBgColor= "#696969"

                }

            },

            labelSettings: {

                leftLabel: '${taskData.LineName}' ,

            },

            editSettings: {

               allowAdding: false,

               allowEditing: true,

               mode: 'Auto',

               allowTaskbarEditing: true

            },

            toolbar: ['ZoomIn','ZoomOut','ZoomToFit'],

            t:_,

    };

[Pooja Priya Krishna Moorthy]

Hi Patrik, 

We analyzed the code snippet shared by you and we note that the reported error arises, as the primary key column(id) was not defined in columns property. By default, id column will be act as a primary key column. Editing is performed based on this primary column. To avoid this issue, we need to enable the isPrimaryKey property for any one of the columns. Please find the below code example. 

 

<e-columns> 

       <e-column field="TaskName" :isPrimaryKey=true headerText="Task Name" width="150"></e-column> 

    //... 

</e-columns> 

 

Please find the sample from below link. 

Sample - https://codesandbox.io/s/vue-template-nv310?file=/src/App.vue:96-1453 

 

We already logged documentation task for this. It will get refreshed as soon as possible. 

 

Regards, 

Pooja K