You'll need to add the listener after rendering, as we don't support that natively to template type, as the template could be anything. A possible approach would be to configure the click listener like this
// setting the callback function to handle the click
function handleClick() {
console.log('this', this);
console.log('Hi! 👋');
};
const taskBoard = new TaskBoard({
// ... other configurations
listeners : {
renderTask : (ev) => {
// I wrote button-test class, but you can set any name you want
const buttons = document.getElementsByClassName('button-test');
const size = buttons.length;
for (let i = 0; i < size; i++) {
buttons[i].addEventListener('click', handleClick);
}
}
},
bodyItems : {
status : {
type : 'template',
template : ({ taskRecord }) => `<input type="button" value="${taskRecord.status}" class="button-test"></input>`,
}
},
Hi,
I have additional question regarding renderTask. How can I add both event and taskRecord as parameter. The following code returns event as undefined.
Hi marcio,
Regarding your code about attaching the click event, I have additional questions as follows.
On click event, I am changing the status of the card. This works ok as per code below.
Additionally, I need to remove div with image after the status has been changed.
Per my debugging, the image I need to removed has been removed already from element. But still visible in the card. I also noticed, the processItems was not triggered anymore after the click event.
How can I update the card so that the removed element will reflect in the card? thanks
listeners: {
renderTask({ element, taskRecord }) {
const button = $('.button-class')
if (button.length > 0) {
for (let i = 0; i < button.length; i++) {
$(button[i]).on('click', function () {
//set status, after executing this code, the card moved automatically to other columns
taskRecord.status = sampleNewStatus
//this code works, per debugging the div with image was removed
//however, the div with imaged still visible in the card
$(element).find('.divToRemove').remove()
//the element with class divToRemove does not exist anymore in the output of console.log
console.log(element)
});
}
}
},
}
I would also strongly recommend not setting a listener up per button and card, but instead catch the click as it bubbles higher up in the DOM structure.
Hi Johan,
Is there a way to access the headerItem html of each card using taskRecord instance? Somehow, per my debugging I need to change the css properties inside the following event.
//Fires when all tasks in the task board are rendered
renderTasks({ source, taskRecords }) {
taskRecords.forEach(taskRecord => {
// how to access the header HTML element here using the taskRecord instance?
})
}
Hi johan,
Per debugging, the header html elements are unchanged when taskRenderer has been triggered and completed. Some html elements were changed only when status is set to Completed (for example) and moved to Completed column automatically. The html elements were changed when renderTasks was triggered.