Our flexible Kanban board for managing tasks with drag drop


Post by rodel.ocfemia »

Hi,

I have this body items. Please note I have set the hidden property to true initially.

bodyItems: {
                desc: { type: 'template', hidden: true, template: ({ taskRecord }) => `<div id="desc_${taskRecord.id}"><b>Description<br></b>${taskRecord.desc}</div>` },
            }
project: {
                tasksData: [
                    { id: 1, desc: 'Sample description 1' },
                    { id: 2, desc: 'Sample description 2' },
                    { id: 3, desc: 'Sample description 3' }
                ]
            }

then on taskClick, can I change the desc bodyItem hidden property to false or true?

taskBoard.on({
            taskClick({ source, taskRecord, event }) {
                 //something like this.
                taskRecord.desc.hidden = false
                
//the following code works but it updates all cards/taskRecords. I wanted to change the property of the selected taskRecord only. source.bodyItems.desc.hidden = false }, });

Thank you in advance.


Post by johan.isaksson »

Hi,

While there is no built-in way of directly hiding task items from a click listener, it can be solved without too much work by implementing a processItems fn (https://bryntum.com/docs/taskboard/api/TaskBoard/view/mixin/TaskItems#config-processItems) in combination with a taskClick listener. You can try the following in the basic demo:

1 - Add a new field to tasks, for example by adding this to the project config:

taskStore : { fields : ['showTitle'] }

2 - Toggle the value of that field in a taskClick listener:

onTaskClick({ taskRecord }) {
    taskRecord.showTitle = !taskRecord.showTitle;
}

3 - Check the value of the field in processItems:

processItems({ headerItems, taskRecord }) {
  headerItems.text.hidden = !taskRecord.showTitle;
}

This works because processItems runs on each render when determining which items to include in a card, and changing the value of a field on task causes a re-render.

toggle.gif
toggle.gif (31.2 KiB) Viewed 1110 times
Best regards,
Johan Isaksson

Post by rodel.ocfemia »

Hi Johan,

Thanks a lot. This solves the issue.


Post by rodel.ocfemia »

Hi,
I have a follow up question regarding this topic.

If I wanted to control the hidden properties of all the tasks/cards without clicking any card (eg. a checkbox outside the taskboard), what is the best way to do it?

I tried the following code. It worked but the updates are reflected once I clicked on any of the card.

$(checkbox).click(function() {
  taskBoard._bodyItems.desc.hidden = true/false
})

Post by marcio »

Hey rodel.ocfemia,

Changing bodyItems directly doesn't trigger a re-rendering (and it's by design), so that's why isn't working. You should use
processItems to define what should or shouldn't be rendered.
https://www.bryntum.com/docs/taskboard/api/TaskBoard/view/mixin/TaskItems#config-processItems

    processItems({ bodyItems, taskRecord }) {
        // hideProps is an id of example checkbox
        const hideProps = document.getElementById('hideProps').checked;
        // hide status bodyItem based on checkbox value
        bodyItems.status.hidden = hideProps;
    },
    bodyItems : {
        status : { type : 'text' }
    },

and to trigger a re-render, you can select/deselect one task to trigger the processItems function:

    // Select first record (just for example)
    taskBoard.selectTask(taskBoard.project.taskStore.records[0]);
    taskBoard.deselectAll();

Best regards,
Márcio


Post by rodel.ocfemia »

Thanks marcio.


Post by rodel.ocfemia »

Hi,
I have follow up question regarding the sample code provided by johan.isaksson as follows.

taskStore : { fields : ['showTitle'] }

onTaskClick({ taskRecord }) {
    taskRecord.showTitle = !taskRecord.showTitle;
}

processItems({ headerItems, taskRecord }) {
  headerItems.text.hidden = !taskRecord.showTitle;
}

The above code works when I click on the card.
My question is how can I access the taskRecord.showTitle from an instance of the taskBoard? I need to change the value of taskRecord.showTitle without clicking on any card. I understand taskRecord is a single record which I clicked (from above example). But is there a way to access and change the taskRecord.showTitle for all the cards/records?

Thanks


Post by alex.l »

You'll need to go throw all records and change each one.
https://bryntum.com/docs/taskboard/api/Core/data/Store#function-forEach

All the best,
Alex


Post by rodel.ocfemia »

Hi,

I tried the following code but it returns error.

_taskBoard = new bryntum.taskboard.TaskBoard({
	// removed code here to shorten the sample
})

checkbox.onclick(function() {
	_taskBoard.taskStore.forEach(function (record, index) {
              console.log(record)
              console.log(index)
      })
})

Uncaught TypeError: instance._taskBoard.taskStore.forEach is not a function

But this code

checkbox.onclick(function() {
	console.log(_taskBoard.taskStore)
})

returns an array of the store records.


Post by mats »

_taskBoard.project.taskStore.forEach

Post Reply