Execute PreventDefault in Deferred callback

2 posts, 1 answers
  1. Grant
    Grant avatar
    174 posts
    Member since:
    Jul 2016

    Posted 20 Feb 2017 Link to this post


    Are there any limitations when executing 'preventDefault()' in the end Callback of the Sortable widget? Below is a snippet of my 'end' callback that Im having trouble with. 

    end: function(e) {
        if (e.oldIndex == e.newIndex) {
            return false;
            .done(function(result) {
                    alert("success: " + result)
            .fail(function() {
                return false;

    If the old and new index are the same, the 'preventDefault()' works fine, rolling back any chages made by the user. However if they are not the same I've created a custom KendoWindow to prompt for a new duration to be entered and returned using deferred promises (not sure if I've described that right).
    The 'fail' callback is triggering and the console.log is printing the sortable event info:

    Object {
      _defaultPrevented: true,
      action: "sort",
      draggableEvent: Object,
      isDefaultPrevented: (),
      item: A.fn.init[1],
      newIndex: 1,
      oldIndex: 0,
      preventDefault: (),
      sender: init,
      __proto__: Object }

    But still the 'preventDefault()' is not either not running or not having an affect of the Sortable widget.

    Please advise on how this can be resolved.

    Kind Regards,

  2. Answer
    Stefan avatar
    3008 posts

    Posted 22 Feb 2017 Link to this post

    Hello Grant,

    Based on the provided information and inspecting the scenario this is a timing issue. When the fail callback is called it is too late to call the preventDefault method.

    Please observe this in the following Dojo(I used the done callback, but the result with the fail is similar):


    Noticed how if the preventDefault is called on a later state it will not take effect and if it is called on time it will prevent dropping of the item.

    I can suggest ensuring that the preventDefault will be called on time.

    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top