Our flexible Kanban board for managing tasks with drag drop


Post by plugins-welcome »

Hello,

When I move a task from a column to another column, I need the new position/index of the task in the targetColumn and I need to make an async api call based on that. As there's only one async dnd listener (beforeTaskDrop) - I need the data in this listener.

I see that I get the data in taskDrop from targetColumn.tasks, but as this is not an async listener, it doesn't help me.

I also noticed that if I console targetColumn in beforeTaskDrop, it shows updated tasks under the object, but if I console targetColumn.tasks it shows the old data.

    console.log('targetColumn', targetColumn); // this shows 25 tasks under tasks element
    console.log('-------');
    console.log('targetColumn.tasks', targetColumn.tasks); // this shows 24 tasks

Post by alex.l »

Hi plugins-welcome,

We need more clarifications from you.

beforeTaskDrop triggers before task drop, so operation is not complete at this moment. This is async method where you can validate operation, show confirmation dialog or whatever you need and when this method return true or at least not Boolean false, operation will be finished.
I would not expect to have new position in beforeTaskDrop, when operation has not been finished. But I am not sure what did you mean in "position".

If you want to catch the moment after column drop and task will be added (to new position), please use https://bryntum.com/docs/taskboard/api/TaskBoard/feature/TaskDrag#event-taskDrop
Since operation completed, handler has not to be async.

You could also use store events if you need data level handling. https://bryntum.com/docs/taskboard/api/TaskBoard/store/TaskStore#events

All the best,
Alex


Post by plugins-welcome »

Hi Alex,

But I am not sure what did you mean in "position".

Basically I need the updated data (tasks) in the targetColumn. By position, I meant at which order the targetColumn has the tasks in it.

You're right, I can get the data from taskDrop. Problem is, I have a usecase where I need to make an api call after the card has been dropped.

The usecase is - we are using our own weight: https://bryntum.com/docs/taskboard/api/TaskBoard/model/TaskModel#field-weight

so after a task has been dropped in the new column, we need to say at which index the card has been dropped, and we update the tasks weight in our db.

But since taskDrop isn't async, we can't do that.

Last edited by plugins-welcome on Fri Sep 16, 2022 4:50 pm, edited 1 time in total.

Post by plugins-welcome »

example:

column1   column2
---------------------------
task 1     task 2
           task 3

task 1 has weight = 1
task 2 has weight = 2
task 3 has weight = 3

If I drag task 1 to between task 2 and task 3, I need to make an async call to backend to update task1's weight to 2.5.


Post by plugins-welcome »

that's why I need the information to know that task 1 has been dropped between task 2 and task 3


Post by alex.l »

Problem is, I have a usecase where I need to make an api call after the card has been dropped.

After drop or before drop? Now you are trying to make a call before drop.

But since taskDrop isn't async, we can't do that.

Why you can't do it? Do you need to prevent operation after response?

All the best,
Alex


Post Reply