Cancel remove operation within onRemove event

[Nikita]

Is there a way to cancel item remove in the remove event handler? Something similar to preventDefault()

[Nikita]

Turns out preventDefault() works. Looks like when moving an item from one ListBox to another to intercept it you have to handle both Remove event on the first one and Add event on the other.

[Anton Mironov]

Hi Nikita,

Thank you for the details provided.

You are correct - using e.preventDefault() in the Remove event handler will cancel the removal of an item from a Kendo UI ListBox. This is the recommended approach for preventing the default remove action.

When transferring items between two ListBoxes, it is best practice to handle both the Remove event on the source ListBox and the Add event on the destination ListBox. This allows you to intercept and control the transfer operation on both ends. For example, you can add custom logic to validate, log, or even block the operation in either event handler.

Here’s a quick example for canceling removal:

function onRemove(e) {
    // Add your custom condition here
    if (/* condition to prevent removal */) {
        e.preventDefault();
    }
}

And wiring up the event in your Razor code:

@(Html.Kendo().ListBox()
    .Name("listbox1")
    .Events(ev => ev.Remove("onRemove"))
    // Other configuration
)

Additional Tips:

• You can use similar logic in the Add event handler to cancel or customize the addition of items to the destination ListBox.
• For drag-and-drop between ListBoxes, the DropSources and ConnectWith configurations help manage which ListBoxes can interact with each other.
• If you need to block transfers under certain conditions, handle both events for full control.

 

Kind Regards,
Anton Mironov
Progress Telerik