-
Notifications
You must be signed in to change notification settings - Fork 312
Mouse & touch events
Each task will emit most of mouse and touch events to gantt-elastic instance.
- 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});
})
}
});