Hello,
I implemented drag and drop between TreeViews as described here. Works well.
However while I want to allow dragging an item from the left control to the right control I do not want to allow drag and drop within the control on the left side.
I was trying to achieve my requirement by using the event "OnNodeDragStop", however I can not find something like target control Id within the event properties.
T
Hi Daniel,
We appreciate your patience as we worked to address your request for restricting the drag and drop action within the same control in the TreeView component. While we attempted to achieve your requirement using invoke method in the “OnNodeDragStop” event, we were unable to fully meet your requirements due to Blazor behavior.
We need some additional time and will update you with further details on or before April 3, 2023.
Regards,
Suresh.
Hi Suresh,
I use vs 2022 update last + .net 7, My Controls update to 25.1.37 use Drap and drop 2 TreeView,
Drag the right node (JACKY) From Right to Left, If Left Tree is Root(/) or Last Child (jj JS Lin) , I can get the Dropped item from EventArgs, but the Folder (DGM 總經理) not work and get null. as follow picture.
Or Dropped node can be get by Invoke JS ?
For your reference, Please kindly help !
Another question : what the best way to get the Dragged and Dropped node by invoke JS or EventArguments ?
Best Regards!
Jacky
Test Dragged to 3 nodes :
(1) , (2) can get the Dropped item
(3) not work get null
Jacky, from the shared details, we understand that you want to perform the drag and drop action between two TreeView’s, with the action only going from left to right and not from right to left. Based on your requirements, we have prepared a Blazor TreeView sample with the latest version(25.1.38).
We have achieved your requirement by using the onNodeDragStop event. In this event, we have prevented drag and drop operations by setting args.cancel to true for the Second TreeView, so the dragged node will not be removed from the second TreeView. You can add a CSSClass in the TreeView for identifying the target tree.
Additionally, we would like to inform you that the arguments (args) of the onNodeDragStop event will contain the dragged node data and the dropped node data.
Check out the below mentioned code snippets and sample for further assistance.
[Index.razor] <SfTreeView CssClass="tree_1" TValue="TeamDetails" AllowDragAndDrop="true"> <TreeViewFieldsSettings TValue="TeamDetails" Id="Id" …> </TreeViewFieldsSettings> </SfTreeView>
<SfTreeView CssClass="tree_2" TValue="TeamDetails" AllowDragAndDrop="true"> <TreeViewFieldsSettings TValue="TeamDetails" Id="Id " …> </TreeViewFieldsSettings> <TreeViewEvents TValue="TeamDetails" OnNodeDragStop="OnDragStop"></TreeViewEvents> </SfTreeView>
public async Task OnDragStop(DragAndDropEventArgs args) { bool isSourceTree = await JSRuntime.InvokeAsync<bool>("TreeView", args.Top, args.Left); if (!isSourceTree) { args.Cancel = true; } }
[_Layout.cshtml] <script> function TreeView(top, left) { var classname = document.elementFromPoint(left, top).closest("li").classList.contains("tree_1"); return classname; } </script> |
Follow the suggested way and get back to us if you need any further assistance.
Regards,
Leo Lavanya Dhanaraj
Hi Loe,
Thank your sugested way, but that is for the Daniel created issure (avoid drag drop not source).
My Issure is above Jacky's last reply : drag From Right To Left the arguments (args) of the onNodeDragStop event sometimes contain the dropped node data.
See my above explanation of the results of to Left 3 different tree Level.
Additinal Test results on 4/8 :
I found that if the droplevel is 1 or 3, the drop node can be obtained, but level 2 is null.
Level 1 or 3
Level 2 null
Please kindly help.
Regards!
Jacky
Jacky, we were able to replicate the reported TreeView drag and drop related issue in the Syncfusion TreeView component, and we considered this as bug on our end. The fix for this issue will be included in the weekly patch release scheduled for 16th April 2024.
You can track the status of the fix through the following link.
Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.
Hi Leo,
Thanks for the quick response, looking forward to the updated fix version.
Best Regards!
Jacky
Hi Leo ,
Are there any fixs or updates to the above issue?
Above link shows that access is denied.
Please Kindly help!
Regards!
Jacky
Hi Jacky,
We have enabled feedback visibility for you, so you can now access it. Please let us know if you need any other assistance.
Regards,
Suresh.
Hi Suresh,
Thanks!, I can access it, I will follow the issure.
Regards!
Jacky
Hi Jacky,
Sorry for the inconvenience. We were unable to include the fix as promised. The fix for this issue has been fixed internally and it is under testing phase and will be included with our upcoming patch release on April 30, 2024. We appreciate your patience.
Leo Lavanya Dhanaraj
Hi Jacky,
Thanks for your patience.
We are glad to announce that our patch release (V25.1.42) has been rolled out successfully. “The droppedNodeData is not properly retrieved for external drag and drop in the OnDragNodeStop event” has been resolved in this release.
To access this fix, we suggest you update the package to 25.1.42 and we include the sample in the latest version for your reference.
Sample : https://blazorplayground.syncfusion.com/rDLpNIWKToXZxAAo
Release notes : https://blazor.syncfusion.com/documentation/release-notes/25.1.42?type=all#bug-fixes-8
Regards,
Leo Lavanya Dhanaraj
Hi Leo ,
I upgrade to the last package : 25.2.4 and it work .
thank your follow and support.
Best Regards!
Jacky