We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Dragging listbox item, pressing ESC inside Dialog, cancels Dialog, not Dragged Item

I have SfListBox inside a SfDialog.

When I drag an item, and press the escape key, I would like the listbox to let go of the item and return the pointer to normal.  However, when I do this, the dialog cancels/closes and the listbox item remains selected with the mouse pointer.

I checked the listbox events but couldn't find anything.

Any ideas on to fix this?

1 Reply

YA YuvanShankar Arunagiri Syncfusion Team January 30, 2023 01:08 PM UTC

Hi Richard,

We have checked your reported query and prepared the sample based on your requirement. Using the JavaScript Invoke method in OnClose event of dialog component, we can hide the dragged item of list box. Please refer to the below code snippet and attached sample.


<SfDialog Height="75%" Width="435px" Target="#target" ShowCloseIcon="true" @bind-Visible="Visibility">



                <div class="dialogContent">

                   <SfListBox TValue="string[]" DataSource="@Vehicles" AllowDragAndDrop="true" TItem="VehicleData">

                    <ListBoxFieldSettings Text="Text" Value="Id" />





        <DialogEvents OnOpen="@BeforeDialogOpen" OnClose="@DialogClosed"></DialogEvents>


….. private async Task DialogClosed(BeforeCloseEventArgs args)


        this.ShowButton = true;

         await JSRuntime.InvokeAsync<string>("HideItem"); }



        function HideItem() {

            var draggedItem = document.getElementsByClassName("e-sortableclone");

            if (draggedItem.length != 0) {

                draggedItem[0].style.display = "none";




Get back to us if you need any further assistance on this. 


YuvanShankar A

Attachment: ListBoxSample_28717294.zip

Live Chat Icon For mobile
Up arrow icon