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
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:
SfListBoxleftBox;
void ListDrop(DropEventArgs<TItem>args)
{
//What do I do here? this of course doesn't work...
var isLeftBox = args.Target == leftBox;
....
}
Any suggestions?
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....
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}");
}
}
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
Giles, we apologize for the inconvenience.
We are still facing more difficulty fixing this issue than we had anticipated. So, we need additional time to fix this bug and have planned to include it in our upcoming weekly patch release, which will be scheduled on the 1st week of January 2023.
Feedback link for tracking purpose: https://www.syncfusion.com/feedback/39226/provide-the-listboxs-id-value-to-ondrop-eventargs-of-the-listbox
We appreciate your patience until then, and you will be informed regarding this once the fix is published.
Hi Giles,
We are glad to announce that our Essential Studio 2022 Volume 4 SP release v20.4.0.48 is rolled out and included the fix (Provided the listbox Id value to Drop event arguments) in this release and is available for download under the following link.
Feedback link: https://www.syncfusion.com/feedback/39226/provide-the-listboxs-id-value-to-ondrop-eventargs-of-the-listbox
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.
Regards,
YuvanShankar A