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

Drap and drop between TreeViews but not within "source" TreeView

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


12 Replies

SA SureshRajan Alagarsamy Syncfusion Team March 30, 2023 05:29 PM UTC

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.



JA Jacky March 31, 2024 01:28 AM UTC

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 :

Image_8767_1711847410768

(1) , (2) can get the Dropped item

Image_1677_1711847159565

 (3) not work get null

Image_4526_1711847229231



LD LeoLavanya Dhanaraj Syncfusion Team April 4, 2024 06:55 AM UTC

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


Attachment: SfTreeView_ac8928ce.zip


JA Jacky April 8, 2024 03:11 AM UTC

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

Image_5035_1712545819513

Level 2 null

Image_2193_1712545789030


Please kindly help.


Regards!

Jacky



LD LeoLavanya Dhanaraj Syncfusion Team April 8, 2024 03:59 PM UTC

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.


Feedback: https://www.syncfusion.com/feedback/52540/the-droppednodedata-is-not-properly-retrieved-for-external-drag-and-drop-in-the#comments


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.



JA Jacky April 9, 2024 07:27 AM UTC

Hi Leo,


Thanks for the quick response, looking forward to the updated fix version.


Best Regards!

Jacky



JA Jacky April 18, 2024 07:04 AM UTC

Hi Leo ,


Are there any fixs or updates to the above issue? 

Above link shows that access is denied.


Please Kindly help!


Regards!

Jacky


Image_7625_1713423735407



SA SureshRajan Alagarsamy Syncfusion Team April 19, 2024 06:58 AM UTC

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.



JA Jacky replied to SureshRajan Alagarsamy April 19, 2024 08:51 AM UTC

Hi  Suresh,


Thanks!, I can access it, I will follow the issure.


Regards!

Jacky



LD LeoLavanya Dhanaraj Syncfusion Team April 23, 2024 12:14 PM UTC

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.


Regards,

Leo Lavanya Dhanaraj



LD LeoLavanya Dhanaraj Syncfusion Team May 13, 2024 01:22 PM UTC

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


Feedback : https://www.syncfusion.com/feedback/52540/the-droppednodedata-is-not-properly-retrieved-for-external-drag-and-drop-in-the


Release notes : https://blazor.syncfusion.com/documentation/release-notes/25.1.42?type=all#bug-fixes-8


Regards,

Leo Lavanya Dhanaraj



JA Jacky replied to LeoLavanya Dhanaraj May 16, 2024 09:28 AM UTC

Hi Leo ,


I upgrade to the last package  : 25.2.4 and it work .

thank your follow and support.


Best Regards!

Jacky



Loader.
Up arrow icon