Hi All,
I am facing an issue where i need to get the selected task id of Gantt chart on selecting a task. I have created "on-selection-changed" event but the event is returning null as selected data. Also the selection listener is not getting triggered whenever i click on different tasks, it gets triggered only for the first time i select a task on page load.
I am using Oracle Visual Builder Studio instance of version 22.10.1
I also followed the steps mentioned in below blog but no luck:
Working with Gantt Component in Visual Builder
Gantt chart code:
<oj-gantt id="gantt" start="[[ $variables.selectedStartDate ]]" end="[[ $variables.selectedEndDate ]]"
gridlines.vertical="visible" major-axis.scale="[[ $variables.selectedMajorAxis ]]"
major-axis.zoom-order='["months", "weeks", "days","hours"]' minor-axis.scale="[[ $variables.selectedMinorAxis ]]"
minor-axis.zoom-order='["weeks", "days","hours","minutes"]' row-axis.rendered="on" selection-mode="single"
dnd.move.tasks="enabled" task-defaults.resizable="enabled" task-defaults.label-position="innerCenter"
task-defaults.border-radius="5" task-defaults.height="50" row-data="[[ $variables.EmployeeGanttVar ]]"
gridlines.horizontal="visible" on-oj-move="[[$listeners.ganttMove]]" on-oj-resize="[[$listeners.ganttResize]]"
style="height: 450px; width: 20px; min-width: 100%; border:solid 3px black" class="oj-flex-item oj-sm-12 oj-md-12"
animation-on-data-change="auto" animation-on-display="auto" drag-mode="select"
on-selection-changed="[[$listeners.ganttSelection]]">
<template slot="rowMappingTemplate" data-oj-as="row">
<!-- <oj-avatar class="oj-flex-item oj-sm-flex-initial" slot="leading" size="xs"
src="[[ $application.path + 'resources/images/person.png' ]]" ></oj-avatar> -->
<oj-gantt-row label="[[ row.data.resource ]]" tasks="[[row.data.tasks]]"></oj-gantt-row>
</template>
<template slot="taskMappingTemplate" data-oj-as="task">
<oj-gantt-task task-id="[[task.data.employee_name]]" start="[[task.data.start_date]]" end="[[task.data.end_date]]"
label="[[task.data.project_name]]"
svg-class-name="[[ $current.rowData.total_allocation <= 100 ? 'demo-sample-taskbar' : 'demo-sample2-taskbar' ]]">
</oj-gantt-task>
</template>
\<template slot="rowAxisLabelTemplate" data-oj-as="rowAxisLabel">
\<svg class="demo-gantt-row-label">
\<g>
\<foreignobject width="2em" height="2em">
\<oj-avatar
src="\[\[ $application.path + 'resources/images/employee\_icon2.jpg' \]\]"
size="xxs">\</oj-avatar>
\</foreignobject>
\<text x="40" y="20" style="font-weight:bold">
\<oj-bind-text value="\[\[rowAxisLabel.rowData.label\]\]" >\</oj-bind-text>
\</text>
\</g>
\</svg>
\</template>
\<template slot="tooltipTemplate" data-oj-as="tooltip">
\<div>
\<div class="oj-sm-float-start">
\<span>
\<oj-bind-text value="\[\['Project: ' + $current.itemData.project\_name \]\]">\</oj-bind-text>
\</span>
\<br/>
\<span>
\<oj-bind-text value="\[\['Start Date: ' + $current.itemData.start\_date\]\]">\</oj-bind-text>
\</span>
\<br/>
\<span>
\<oj-bind-text value="\[\['End Date: ' + $current.itemData.end\_date\]\]">\</oj-bind-text>
\</span>
\<br/>
\<span>
\<oj-bind-text value="\[\['Allocation: ' + $current.itemData.allocation + '%'\]\]">\</oj-bind-text>
\</span>
\</div>
\</div>
\</template>
\<oj-menu
id="ctxMenu"
slot="contextMenu" on-oj-action="\[\[$listeners.ctxMenuAction\]\]">
\<oj-option value="Edit">Edit\</oj-option>
\<oj-option value="Delete">Delete\</oj-option>
\<oj-option value="Duplicate">Duplicate\</oj-option>
\</oj-menu>
</oj-gantt>