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
close icon

Prevent drop in some nodes


There is any way to prevent dropping one node into another?

I think that a good example would be is a treeview that simulates a file system. In such treeview I could only drop a node into a folder node and couldn't drop a node in a file node... 

Searching the forum I see that I can use the cancel property in nodeDragStop event... But such alternative doesn't provide a good affordance to the user since there is no hint that he can't perform this action.

3 Replies

GL Gopal Lakshmanan Syncfusion Team August 24, 2015 04:23 PM UTC

Hi Rafael,

Thanks for using syncfusion products,

We have analyzed your queries and based on your requirement we have prepared the sample and attached it in the following location.

Sample location:


In this sample, We have separated nodes in Folders and Files, The folder nodes can be able to drag and drop but file nodes only able  to drag.

In ClientSideEvent we prevent the drop event for the file nodes by the way of added class “preventDrop” through hmlattributes.

While dragging on those  file nodes, icon will be added into minus for the purpose of drop prevent notification.


@Html.EJ().TreeView("drop").ClientSideEvents(e => e.NodeDrag("onNodeDrag").NodeDragStop("onNodeDragStop")).Items(items =>


                            items.Add().Text("Folder1").Expanded(true).Children(child =>


                                child.Add().Text("File 1.1").HtmlAttributes(attr);

                                child.Add().Text("File 1.2").HtmlAttributes(attr);




                           items.Add().Text("Folder2").Children(child =>


                                child.Add().Text("File 2.1").HtmlAttributes(attr);

                                child.Add().Text("File 2.2").HtmlAttributes(attr);







In this script section



    function onNodeDrag(args) {

        if ($(args.target).closest('.e-item').hasClass('preventDrop')) {


            document.body.style.cursor = 'not-allowed';




    function onNodeDragStop(args) {

        if ($(args.target).closest('.e-item').hasClass('preventDrop'))

        args.cancel = true;



Please check with the  provided sample and let us know if you need further assistance.

To know about the list of properties, methods and events supported by any JS component, go to the online help link for JS (http://helpjs.syncfusion.com/js/overview) and click on the “API reference” section and

navigate to the particular component. For example, to know all the available options in DatePicker check the following link,


For getting started and to know about the important features in any particular component, go to the help link and click on the particular component. For example, getting started and key features in DatePicker can be found in


Please let us know if you have further queries.


Gopal L

RD Rafael Delanhese August 24, 2015 05:41 PM UTC


The sample worked like a charm and I don't have any further questions regarding how to implement the desired feature.

Just one more issue, whats is the easiest way to find out information like that: '.e-dropedStatus' is the class used in the tooltip...

Thanks so much by the help.

GL Gopal Lakshmanan Syncfusion Team August 25, 2015 10:54 AM UTC

Hi Rafael,


Thanks for the update,

Sorry for the inconvenience caused,

Currently we don't have the requested use-case scenario in our documentation, So once we will include those details in our documentation in online and we will let you know the details. We appreciate your patience until then.

Please let us know if you have further queries.



Gopal L

Live Chat Icon For mobile
Up arrow icon