Click to select task (for editing/deleting)

[stevenxvii]

Hello,

I am looking for a way to make the task list item selectable (with checkbox) for further actions (on chart click, etc.). But I couldnt find any instruction. I currently do as follows, I would appreciate for any help.

gantt-elastic v-on:main-view-mouseup="taskclicked"

taskclicked: function (event, data) {
if (event.path[4]) {
if (event.path[4].className === 'gantt-elastic__task-list-item') {
let t_id, t_name, t_assigned, t_start_date, t_type, t_progress
t_id = event.path[4].childNodes[0].innerText

        let filtered_task = this.ganttState.tasks.filter(function(task) {
          return task.id == t_id;
        });

        let selected_task = filtered_task[0];

        this.selecting_task.id = selected_task.id;
        this.selecting_task.label = selected_task.label;
        ...

}

Thanks in advance.

[neuronet.io]

I cannot help you here too much, because it will take too long for me.
I only can give you some tips here.

First of all you must edit GanttElastic.vue component.
Add option called selected to each task with this.$set method.
Add taskList column with checkbox with model corresponding to task.selected.
When you check box - task.selected will be true otherwise false.

If you need to modify style of selected row (background for example) you must move styling to computed property and then merge original with yours.

[Dmitry Mishin]

@stevenxvii have you solved this?