Skip to Main Content

DevOps, CI/CD and Automation

Gantt chart selection listener is not working

User_8X8H6Nov 1 2022

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>

Comments
Post Details
Added on Nov 1 2022
1 comment
20 views