event firing when move is in progress and undo

[venugopal]

Hi I have a requirement to show a popup when a card is moved or dropped to  another column say working to done. in the popup if i say no then the card has to be moved back to where it was before.  Basically can i undo the movement after validation or can i move the object without manual intervention. Does there are methods to move the card from one column to another thru Javascript?

 

Thanks!

Venu

[Mihaela]

Hi,

You can achieve the desired result by subscribing to the MoveStart and MoveEnd events of the TaskBoard and adding/deleting the card through the addCard() and deleteCard() methods:

 @(Html.Kendo().TaskBoard()
  .Name("taskBoard")
  .Events(ev => {
            ev.MoveEnd("onMoveEnd");
            ev.MoveStart("onMoveStart");
  })
  ...
)

@(Html.Kendo().Dialog() //Hidden Dialog
        .Name("dialog")
        .Title("Software Update")
        .Content("....")
        .Visible(false)
        .Modal(false)
        .Actions(actions =>
        {
            actions.Add().Text("Yes").Action("clickYes");
            actions.Add().Text("No");
        })
    )

<script type="text/javascript">
    var sourceColumnStatus = "";
    var cardToAdd;
    var cardToDelete;

    function clickYes(e) { //handle the Dialog Action "Yes"
        var taskBoard = $("#taskBoard").data("kendoTaskBoard"); //get a reference of the TaskBoard
        taskBoard.deleteCard(cardToDelete); //remove the card
        taskBoard.addCard({ //add the card in the desired column
            Description: cardToAdd.Description,
            ID: cardToAdd.ID,
            Status: "inProgress", //set the column of the card
            Title: cardToAdd.Title
        });
        taskBoard.saveCard(); //save the card
    }

    function onMoveStart(e) {
        sourceColumnStatus = e.column.Status; //store the status of the column the card is moved from
    }

    function onMoveEnd(e) {
        var taskBoard = e.sender;

        if (e.action == "receive") { //Possible values are: "sort" - indicates that item's position was changed inside the same Sortable container; "remove" - indicates that the item was removed from current Sortable widget; "receive" - indicates that the item was received by a connected Sortable widget instance;
            if (e.column.Status == "inProgress") { //check the status of the column, where the card will be moved
                if (sourceColumnStatus != "inProgress") {
                    e.preventDefault(); //prevent the default event action
                    cardToAdd = e.card; //store the data item of the card
                    cardToDelete = e.cardElement; //store the card element
                    $('#dialog').data("kendoDialog").open(); //open the Dialog
                }
            }
            sourceColumnStatus = "";
        }
    }
</script>

I hope that helps.

 

Regards, Mihaela Progress Telerik