Vue 3 Composition API gantt Chart Custom Template Not Working
Hello, thanks for the reply,
unfortunately, I'm still getting issue with this method using v-slot.
So I tried coping the method using the demo link into my code
<template>
<v-container>
...
<ejs-gantt
id="GanttContainer"
ref="gantt"
:dataSource="data"
:taskFields="taskFields"
:columns="columns"
:toolbar="toolbar"
:toolbar-click="toolbarClick"
:allow-excel-export="true"
:allow-pdf-export="true"
:editSettings="editSettings"
:row-height="rowHeight"
:taskbar-height="taskbarHeight"
:splitter-settings="splitterSettings"
:allow-unscheduled-tasks="allowUnscheduledTasks"
:include-weekend="true"
:timeline-settings="timelineSettings"
:duration-unit="durationUnit"
:date-format="dateFormat"
:day-working-time="dayWorkingTime"
:work-week="workWeek"
:highlight-weekends="true"
:allowSorting="true"
:sortSettings="sortSettings"
:allow-filtering="true"
:load="ganttloaded"
:created="ganttcreated"
:record-double-click="recordDoubleClick"
:data-bound="dataBound"
:milestoneTemplate="milestoneTemplate"
:labelSettings="labelSettings" <--- still issue
>
<template v-slot:leftLabelTemplate="{data}">
<div>
<template>
<div>
{{ data.taskData }}
</div>
</template>
</div>
</template>
<template v-slot:rightLabelTemplate="{data}">
<div>
<template>
<div>
{{ data.taskData }}
</div>
</template>
</div>
</template>
</ejs-gantt>
...
</v-container>
</template>
<script>
import {
GanttComponent,
Edit,
Selection,
Toolbar,
DayMarkers,
Sort,
Filter,
ExcelExport,
PdfExport,
} from"@syncfusion/ej2-vue-gantt";
...
import MilestoneTemplate from"./taskbar-milestone-temp.vue";
...
exportdefault {
...
setup(props) {
provide(
'gantt', [
Edit,
Selection,
Toolbar,
DayMarkers,
Sort,
Filter,
ExcelExport,
PdfExport,
]);
...
const labelSettings =({
leftLabel: () => ({ template: "LeftLabelTemplate" }),
rightLabel: () => ({ template: "RightLabelTemplate" }),
});
const milestoneTemplate = () => ({ template: MilestoneTemplate });
...
return {
....
labelSettings,
milestoneTemplate,
...
}
}
I still getting the same error unfortunately
"Cannot read properties of undefined (reading 'components')"
If I tried to copy exactly like what is done in the script, it loads but incorrectly (Only loads in the string instead of the template)
The Demo sample you provide was done in Vue 3 Option API, is it possible to get that example in Vue 3 composition API?
Thank you
Hello, sorry for the late reply.
Thanks you so for the example, with your help I was able to get the `taskbarTemplate` parameter working, but I was not able to get `labelSettings` still unfortunately. I believe it not registering/rendering the template as component but still register as a string, but I don't know the issue still I almost copied the code example provide.
Here is the codebase I created (All sensitive data is censored and removed) I'm using to get this working. I want it to simply says the `data.name` and `data.EventType` as the left and right template, but it is still showing as `leftLabelTemplate` and `rightLabelTemplete` as shown above
Line 58 is where I inputed the parameter for labelSettings:
:labelSettings="labelSettings"
Line 84-90 is where I rendering the template for labelSetting
<template #leftLabelTemplate="{ data }">
<div>{{ data.name }}</div>
</template>
<template #rightLabelTemplate="{ data }">
<div>{{ data.EventType }}</div>
</template>
Line 119-122 is where I created the constant
const labelSettings = {
leftLabel: 'leftLabelTemplate',
rightLabel: 'rightLabelTemplate',
};
Line 174-182 is where I created the column names:
const taskFields = ref({
id: "EventID",
name: "EventName",
child: "ChildEvents",
eventType: "EventType",
startDate: "DateTimeStart",
endDate: "DateTimeEnd",
testResult: "TestResult",
});
Line 391 is return it in the script:
return {
gantt,
parts,
overlay,
dialog,
selectedEvent,
allEvents,
data,
dateFormat,
taskFields,
columns,
splitterSettings,
labelSettings,
Thanks for the help so far, hopefully we can get this working!
Thanks again,
Jun
Attachment: TimelineViewer_61c63c30.zip
