JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Kanban Kanban task drag – how to find task details?

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #101945
    davout
    Member
    Up
    0
    Down

    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?
     

    #101948
    yavordashew
    Member
    Up
    0
    Down

    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/

    #101953
    davout
    Member
    Up
    0
    Down

    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|:
    }

    #101959
    yavordashew
    Member
    Up
    0
    Down

    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/

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.