"Undo" TaskBoard Card Movement in OnMove event.

1 Answer 75 Views
TaskBoard
Headygains
Top achievements
Rank 1
Veteran
Headygains asked on 21 Oct 2021, 05:01 PM

Hello, I'm attempting to "undo" an "invalid" card move on a taskboard between 2 cols with specified states.

I'll add the HtmlHelper code:


@(Html.Kendo().TaskBoard()
    .Name("kittingTaskBoard")
    .ColumnSettings(s =>
    {
        s.TemplateId("column-template");
        s.Width("320");
        s.Buttons(b =>
        {

        });

    })
    .Columns(c =>
    {
        c.Add().Text("On Hold").Status("2");
        c.Add().Text("New").Status("1");
        c.Add().Text("In Work").Status("3");
        c.Add().Text("Staged").Status("4");
        c.Add().Text("Verified").Status("5");
    })
    .Editable(false)
    .DataDescriptionField("ShipNumber")
    .DataTitleField("Control")
    //.DataOrderField("PriorityId")
    .DataStatusField("StatusId") 
    .TemplateId("card-template")
    .Events(events => events.MoveStart("onKitSessionStartMove").MoveEnd("onKitSessionMove"))
    .DataSource(source => source.Ajax().Read(read => read.Action("GetKittingQueue", "Fulfillment")))
    .Height("980")
    .Events(ev => ev.DataBound("onDataBound").ColumnsDataBound("onColumnsDataBound")))

I'll add the validation code:


        const manager = {
            claim: function(id, uid) {
                $.ajax('@Url.Action("ClaimKitSession", "Fulfillment")',
                    {
                        method: "Post",
                        data: getAntiForgeryToken({ id })
                    }).done(function(response) {
                    notify(response);
                }).fail(function(error) {
                    notify(error.responseJSON);
                });
            },
            valid: function(from, to) {
                console.log(`[valid]: ${from} > ${to}`);
                if ((from === "3" && to === "1") // InWork > New
                        ||
                        (from === "3" && to === "2") // InWork > OnHold
                        ||
                        (from === "4" && to === "3") // Staged > InWork
                        ||
                        (from === "5" && to === "4") // Verified > Staged
                        ||
                        (from === "1" && to === "4") // New > Staged
                        ||
                        (from === "1" && to === "5") // New > Verified
                ) {
                    return false;
                }
                return true;
            }
        }


I'll add the Move Event code:


        function onKitSessionStartMove(e) {
            state.card = null;
            state.col = "0";
        }

        function onKitSessionMove(e) {
            if (state.card !== null) {
                if (!isUndefined(e.card)) {
                    if (e.card.RowId === state.card.RowId) {
                        if (!isUndefined(e.column)) {
                            if (e.column.Status === state.col) {
                                return;
                            }
                        }
                    }
                }
            } else {
                state.card = e.card;
                state.col = e.column.Status;
                return;
            }
            state.card = e.card;
            state.prev = state.col;
            state.col = e.column.Status;

            setBadgeText();

            if (manager.valid(state.prev, state.col)) {
                if (state.col === "3") {
                    manager.claim(state.card.RowId);
                }
            } else {
                toastr.warning("Invalid action prevented, you do not have permission to perform this action",
                    "Warning",
                    { positionClass: "toast-bottom-right", containerId: "toast-bottom-right" });
            }

        }

I was wondering If i could there was a card function or something I can call when the validation fails to move it back to it's previous column?

1 Answer, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 26 Oct 2021, 01:18 PM

Hello Dalton,

You can prevent the MoveEnd event conditionally. So you can have your logic do the respective validation in the MoveEnd event handler, and if the validation fails, you can prevent the event by calling e.preventDefault()

As a result the card will move back to the column it was dragged from.

Regards,
Ivan Danchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
TaskBoard
Asked by
Headygains
Top achievements
Rank 1
Veteran
Answers by
Ivan Danchev
Telerik team
Share this question
or