Forum Stats

  • 3,874,176 Users
  • 2,266,677 Discussions
  • 7,911,754 Comments

Discussions

Gantt chart selection listener is not working

User_8X8H6
User_8X8H6 Member Posts: 3 Green Ribbon

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>

Tagged:

Answers