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

[Richard Aubin]

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?

[YuvanShankar Arunagiri]

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.

[Index.razor]:

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

        <DialogTemplates>

            <Content>

                <div class="dialogContent">

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

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

                </SfListBox>

                </div>

            </Content>

        </DialogTemplates>

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

    </SfDialog>

….. private async Task DialogClosed(BeforeCloseEventArgs args)

    {

        this.ShowButton = true;

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

[_Layout.cshtml]:

<script>

        function HideItem() {

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

            if (draggedItem.length != 0) {

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

            }

        }

    </script>

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

Regards,

YuvanShankar A

Attachment: ListBoxSample_28717294.zip