Mouse & touch events

Each task will emit most of mouse and touch events to gantt-elastic instance.

Available events

• click
• mouseenter
• mouseover
• mouseout
• mousedown
• mouseup
• mousewheel
• touchstart
• touchmove
• touchend

Events are fired separately for each of task type (task, milestone, project).

To react on those events you need to listen chart-(task type)-(event name) where (task type) is task,milestone or project and (event name) is click, touchstart, mouseup and so on...

Same events are available for task list taskList-(task type)-(event name) like taskList-task-click.

When event is fired, you will get original event and task data as one function argument (one object). event is original event and data is task which is clicked or hovered etc.

When task list event is fired you will have an event, data and column properties to disposition. You can also add event listener to column settings, so you don't need to find out which column is clicked. for example

columns:[
/* ... */
  {
    id: 2,
    label: 'Description',
    value: 'label',
    width: 200,
    expander: true,
    html: true,
    events: {
      click({ event, data, column }) {
        alert('description clicked!\n' + data.label);
      }
    }
  },
/* ... */
]

You can show some popup or modal when some event occurs.

For example

    const app = new Vue({
      components: {
        'gantt-elastic': GanttElastic
      },
      data: {
        tasks,
        options
      }
    });

    // gantt state which will be updated in realtime
    let ganttState, ganttInstance;

    // listen to 'gantt-elastic.ready' or 'gantt-elastic.mounted' event
    // to get the gantt state for realtime modification
    app.$on('gantt-elastic-ready', (ganttElasticInstance) => {
      ganttInstance = ganttElasticInstance;
      ganttState = ganttElasticInstance.state;

      // listen to task click event
      ganttInstance.$on('chart-task-click', ({ event, data }) => {
        console.log('task clicked!', { event, data })
      });
      // listen to milestone click event
      ganttInstance.$on('chart-milestone-click', ({ event, data }) => {
        console.log('milestone clicked!', { event, data })
      });
      // listen to project click event
      ganttInstance.$on('chart-project-click', ({ event, data }) => {
        console.log('project clicked!', { event, data })
      });
      // listen to task list milestone click event
      ganttInstance.$on('taskList-milestone-click', ({ event, data, column }) => {
        console.log('milestone clicked!', { event, data, column })
      });

      console.log('gantt-elastic ready!', ganttState);
    });

If you are running vue app just listen those events on gantt-elastic component.

<gantt-elastic @chart-task-click="onTaskClick"></gantt-elastic>

If you are using bundled version

const app = GanttElastic.mount({
    el: '#gantt', // <- your container id
    tasks: tasks,
    options: options,
    ready(instance){
      instance.$on('chart-task-click',({event, data})=>{
        console.log("task clicked!", {event, data});
      })
    }
});