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.
Unfortunately, activation email could not send to your email. Please try again.

Prevent drop in some nodes

Thread ID:

Created:

Updated:

Platform:

Replies:

120005 Aug 21,2015 04:09 PM Aug 25,2015 06:54 AM ASP.NET MVC 3
loading
Tags: TreeView
Rafael Delanhese
Asked On August 21, 2015 04:09 PM


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 [Syncfusion]
Replied On August 24, 2015 12:23 PM

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
Replied On August 24, 2015 01:41 PM

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 [Syncfusion]
Replied On August 25, 2015 06:54 AM

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
 
 



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;