Our flexible Kanban board for managing tasks with drag drop


Post by raining »

when render bodyItems,I need get task index.How can I get it?


Post by mats »

Can you please explain a bit further and share your code / use case?


Post by marcio »

Hey raining,

You can use the parentIndex field, and to retrieve that when you render a task, you can use the renderTask listener.

listeners        : {
        renderTask : ({ taskRecord }) => {
            console.log('parentIndex -> ', taskRecord.parentIndex);
            console.log('taskRecord -> ', taskRecord);
        }
    }

https://www.bryntum.com/docs/taskboard/api/TaskBoard/view/TaskBoard#event-renderTask
https://www.bryntum.com/docs/taskboard/api/TaskBoard/model/TaskModel#field-parentIndex

If this is not your case, could you please explain with more details what you want to achieve??

Best regards,
Márcio


Post by raining »

The ”taskRecord.parentIndex“ get is order by source data, I want the index is order by after the grouping.


Post by alex.l »

Could you please provide more details? What do you want to achieve by that?
At the moment of "render bodyItems" it has not been created in DOM, so it doesn't have element and index of element.
But maybe I misunderstood you.

All the best,
Alex


Post by raining »

Image
I want ‘index’ like this,can I get it?


Post by alex.l »

Could you please describe what index is this? Should it be updated when you move tasks, remove tasks, etc.

All the best,
Alex


Post by raining »

I mean “like this" is index after grouping like the picture above.

It best can update when drag task


Post by raining »

I mean “like this" is index after grouping like the picture above.

It best can update when drag task.Needn't update when remove task


Post by marcio »

Hey raining,

You can achieve that by using the following approach (please adapt the status for your need, I'll be using the Basic Taskboard demo). If we use the "index" as you suggested, we have

Screen Shot 2022-07-29 at 3.39.50 PM.png
Screen Shot 2022-07-29 at 3.39.50 PM.png (139.69 KiB) Viewed 861 times

To get that sorted correctly, we need to have that structured properly separated as we have in the UI, in the example, we have 3 statuses (todo, doing, and done in that order), so we will have 3 arrays sorted by the parentIndex. After that, we join the arrays in the same order that they are in the UI, and we have an array in which the indexes are the ones that you want, and you also have the right data related to that position.

const todoTasks = taskboard.project.eventStore.allRecords.filter(record => record.status === 'todo').sort((record1, record2) => record1.parentIndex > record2.parentIndex);
const doingTasks = taskboard.project.eventStore.allRecords.filter(record => record.status === 'doing').sort((record1, record2) => record1.parentIndex > record2.parentIndex);
const doneTasks = taskboard.project.eventStore.allRecords.filter(record => record.status === 'done').sort((record1, record2) => record1.parentIndex > record2.parentIndex);

const sorteredRecords = [...todoTasks, ...doingTasks, ...doneTasks];

Best regards,
Márcio


Post Reply