Kanban task drag – how to find task details?

[davout]

Hello,
Using your Kanban component,   I am capturing the onDragEnd event,  but I can’t work out how to find what task is being dragged.
What sub properties of ‘event’ will give me the

• task id
• the kanban column into which the task was dropped

Also,  when it comes to defining the html, should I be using ‘(onDragEnd)=’ or ‘(dragEnd)=’ in the HTML?
 

[yavordashew]

Hi davout,
I have prepared a quick code snippet which showcases how to get the data you need.
First in your app.component.html file you define the event like this:

<smart-kanban
    #kanban id="kanban"
    [dataSource]="dataSource"
    [columns]="columns"
    [formatStringDate]="'dd MMM yyyy'"
    [taskUserIcon]="false"
    [taskActions]="true"
    [taskDue]="true"
    (dragEnd) = "dragEndHandler($event)"
    >
</smart-kanban>

//And in your app.component.ts file:

    dragEndHandler(event): void {
        const detail =  event.detail,
        item = detail.item;
        setTimeout(() => {
            console.log(item.data.status);
            console.log(item.data.id)
        }, 100);
    };

Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[davout]

This is a little odd,  and I’d say that this is a logical functional bug
The docs (https://www.htmlelements.com/angular/demos/kanban/overview/#toc-ondragend) so that this event is cancellable,  but without knowing WHAT kanban the task was dropped into  I can’t see how I can verify whether the event should be cancelled or not
What seems to be missing is a extra property in the details object to hold the drop target details, like
event,details.target.data {
status:
swimlane:
id|:
}

[yavordashew]

Hi davout,
I agree yes this is a missing feature and I will add work item for it.
Thank you for you corporation as thanks to this we are able to improve our products constantly!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts