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

SfListBox Drag/Drop identify Target

Hi.

I have two listboxes between which I can drag items.

I need to identify the listbox into which items are being DROPPED. This could be an item from a different Listbox, or simply changing the order of the existing items within a ListBox.

I know from this thread that DropEventArgs now has a Target property:

https://www.syncfusion.com/forums/167779/listbox-drag-and-drop

But it is not at all clear to me how to actually associate this with my controls.

I have two listboxes defined in a component, and I will re-use this component multiple times in a page.

I note that the Target property has an Id, and that Id appears to be "2" for my first listbox, "3" for the second one in the first use of my component on a page.

In the second use of my component on the same page I see the Ids are now 4 and 5.

I cannot see how I can either set these Ids, or get a link to them in code.

I added this to the markup for the SfListBox and used @ref properties, but I cannot see how I can actually work out from these things which SfListBox is receiving the dropped item.

<SfListBox

    @ref="leftBox" 
TItem="TItem"
TValue="..."
....more properties...
>
<ListBoxEvents
TItem="TItem"
   TValue="..."
   OnDrop="ListDrop"
</SfListBox>

I have attempted to add this property & method to the code:

SfListBox leftBox;

void ListDrop(DropEventArgs<TItem> args)
{
//What do I do here? this of course doesn't work...
var isLeftBox = args.Target == leftBox;
....
}

Any suggestions?


2 Replies

GW Giles Wakefield November 18, 2022 04:11 AM

I've now managed to get this to work, but to do so I had to add a class to each List Box then use JSInterop to directly check whether the element has a particular class.

This seems ridiculous lengths to have to go to to retrieve what should be fairly basic information - so Am I missing something obvious here?

For those who might find this post and want a better explanation of the "solution":

First, Define a JS function, in a nice unique namespace in index.html.

This function could check Id or other attributes of course, it's just JS stuff.  In my case because I could quickly add CSS classes to the lists (see next step) I chose to write a function to check if a particular class is in the css classes for the element


<script>
        var MyUtils = MyUtils || {};
        MyUtils.hasClass = function (element, className) {
            return element.classList.contains(className);
        };
</script>


Next, in the blazor component....

  1. Inject an IJSRuntime instance
  2. add class to the Listboxes to assist in identifying them
  3. in the "Drop" handler add a JsInterop call to call the JS function you defined above.

so put together, the .razor file now has these bits:


@inject IJSRuntime JS;

...(snip a bunch of other stuff)

<SfListBox
DataSource="@ItemList"
    CssClass="left-box"
    Scope="@Scope"
    ... (snip more properties etc)
>
<ListBoxEvents
     TValue="TValue"
    TItem="TItem"
    OnDrop="SelectListDrop"
></ListBoxEvents>
</SfListBox>


@code{
    ...(snip other code)
    
async Task SelectListDrop(DropEventArgs<TItem> args)
    {      
        var isLeft = await JS.InvokeAsync<bool>(
"MyUtils.hasClass",
new object[] { args.Target, "left-box" });

        var targetBoxDesc = isLeft ? "left-box" : "right-box";
        Console.WriteLine($"Target is {targetBoxDesc}");
    }
}




YA YuvanShankar Arunagiri Syncfusion Team November 19, 2022 08:06 AM

Hi Giles,


Confirmed this as an issue and logged a bug report. The fix will be available in our upcoming patch release planned for 7th December 2022.


Feedback link for tracking purpose: https://www.syncfusion.com/feedback/39226/provide-the-listboxs-id-value-to-ondrop-eventargs-of-the-listbox


You will be informed regarding this once the fix is published.


Regards,

YuvanShankar A


Loader.
Live Chat Icon For mobile
Up arrow icon