Our flexible Kanban board for managing tasks with drag drop


Post by rodel.ocfemia »

Hi,
Is there a way to attach DOM object to bodyItems template instead of string so that I can add event dynamically?

Current code

bodyItems : {
        status: {
            type     : 'template',
            template : ({ taskRecord }) => `<input type="button" value="${taskRecord.status}"></input>`
        }
    },

I tried this code but the template field is not displayed in the card. I'm using jquery to create the button DOM object.

var button = $(`<input type="button" value="${taskRecord.status}"></input>`)
button.on('click',function(taskRecord){
  console.log('click')
})
bodyItems : {
        status: {
            type     : 'template',
            template : ({ taskRecord }) => button 
        }
    },

Post by marcio »

Hey rodel.ocfemia,

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>`,
    }
},

Best regards,
Márcio


Post by rodel.ocfemia »

thanks marcio. issue resolved.


Post by rodel.ocfemia »

Hi,
I have additional question regarding renderTask. How can I add both event and taskRecord as parameter. The following code returns event as undefined.

listeners: {    
renderTask({ event, taskRecord }) { console.log(event) } }

Thanks


Post by marcio »

Hey, if you check the renderTask listener documentation here https://www.bryntum.com/docs/taskboard/api/TaskBoard/view/mixin/TaskBoardDomEvents#event-renderTask

We don't have an event object, we have source, taskRecord, isRefresh and element

Best regards,
Márcio


Post by rodel.ocfemia »

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)
                    });
                 }
              }
           },
        }

Post by johan.isaksson »

Hi,

You should (usually) not directly manipulate the elements of a card, instead you should use a taskRenderer to customize the contents (https://bryntum.com/docs/taskboard/api/TaskBoard/view/TaskBoardBase#config-taskRenderer), and/or processItems to toggle which items are shown. Setting taskRecord.status as you do on click should make it re-render.

You could also show/hide things using CSS.

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.

Best regards,
Johan Isaksson

Post by rodel.ocfemia »

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?
               })
            }

Post by johan.isaksson »

Hi,

you should normally not access the html elements of cards directly. Instead add your CSS classes in a taskRenderer function (https://bryntum.com/docs/taskboard/api/TaskBoard/view/TaskBoardBase#config-taskRenderer).

For example:

taskRenderer({ taskRecord, cardConfig }) {
	if (someFlag) cardConfig.children.header.class['my-class'] = 1;
}
Best regards,
Johan Isaksson

Post by rodel.ocfemia »

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.

I will try to create a small project for demo.


Post Reply