[ANGULAR] process click event to get data of the task

[ducminh1511]

I added the code as you instructed, whether I have to add this in html [listeners] = "ganttConfig.listeners", it seems that it is reporting error listeners are not in GanttComponent. Even if I remove it, clicking the task will not console

[ducminh1511]

export default {
    //   dependencyIdField: "sequenceNumber",
    

columns: [{
    type: 'name',
    field: 'name',
    text: '名前',
    width: 1
}],

listeners: {
    taskClick: ({
            taskRecord
        }) =>
        console.log('taskRecord=>>>>>>>>>>>>', taskRecord),
},

features: {
    
    taskDrag: {
        validatorFn(taskRecords, date, duration, newResource) {
            const firstDraggedTask = taskRecords[0], // or better use a loop
                isValid = firstDraggedTask.color === '#303331';
            console.log('taskRecord', taskRecords[0].color);
            return {
                valid: newResource.available && isValid,
            };
        },
    },
    taskResize: {
        validatorFn(record) {
            console.log('taskRecord1111111', record);
            return record.taskRecord.originalData.color != '#303331';
        },
    },
    
    taskEdit: false,
    
    timeRanges: {
        // showCurrentTimeLine: {
        //   name: "今日",
        // },
        showCurrentTimeLine: true,
    },
    
    viewPreset: {
        
        base: 'weekAndDay',
        tickWidth: 52,
        headers: [{
                unit: 'month',
                dateFormat: 'YYYY年 MMM',
            },
            
            {
                unit: 'day',
                dateFormat: 'ddd',
            },
            {
                unit: 'day',
                dateFormat: 'D',
            },
        ],
    },
    
    eventColor: null,
    
    dependencies: false,
},
taskRenderer: ({
    taskRecord,
    renderData
}) => {
    if (taskRecord.color) {
        renderData.style += `background-color:${taskRecord.color}`;
    }
    
    if (taskRecord.isLeaf && !taskRecord.isMilestone) {
        return taskRecord.name;
    }
},
project,
};

[alex.l]

Hi,

Since our bry-gantt component is a regular angular component, you have to add listeners in angular style (https://angular.io/guide/event-binding).
It is mentioned in our guide https://bryntum.com/docs/gantt/#guides/integration/angular.md#integrating-gantt-with-angular-using-the-wrapper
So, instead of

[listeners] = "ganttConfig.listeners"

please add
code = "onGanttEvents($event)"[/code]

And onGanttEvents method should look like this:

onGanttEvents(event: any) {
    if (event.type === 'taskclick') {
        console.log(event.taskRecord); // your code here
    }
}

you could also add event listeners after an instance has been created:

this.gantt.ganttInstance.on('taskclick', () => {
    console.log('task clicked')
});

[ducminh1511]

Hi Alex,

Your idea is to remove [listeners] = "ganttConfig.listeners", I don't know where to put onGanttEvents ($ event) in my code. You can add them in the code above I sent them to let me know where to put them

[ducminh1511]

Thank you so much, I did