Prevent drop in some nodes

[Rafael Delanhese]

Hello,

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.

[Gopal Lakshmanan]

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:

http://www.syncfusion.com/downloads/support/directtrac/120005/TreeViewNodeDragStop-110997717.zip

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);

                               

 

                            });

                            items.Add().Text("File");

                        }).AllowDragAndDrop(true)

 

In this script section

 

<script>

    function onNodeDrag(args) {

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

            $('.e-dropedStatus').removeClass("e-plus").addClass("e-minus");

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

        }

    }

 

    function onNodeDragStop(args) {

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

        args.cancel = true;

    }

</script>

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,

http://helpjs.syncfusion.com/js/api/ejdatepicker

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

http://helpjs.syncfusion.com/js/datepicker/overview

Please let us know if you have further queries.

Regards,

Gopal L

[Rafael Delanhese]

Hi.

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.

[Gopal Lakshmanan]

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.

 

Regards,

Gopal L