This is a migrated thread and some comments may be shown as answers.

problem with OnClientNodeDropping with JQuery AJAX

3 Answers 50 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Tomer
Top achievements
Rank 1
Tomer asked on 18 Mar 2014, 07:46 AM
Hi,

I am trying to add Drag and Drop Functionality in client side with Ajax Post Request to the server:

<telerik:RadTreeView runat="server" ID="rdtrOrganization" Height="450" BorderWidth="0" OnNodeExpand="groupsTree_NodeExpand" OnClientNodeClicked="ClientNodeClicking"       OnClientNodeDropping ="onNodeDropping" EnableDragAndDrop="true"                     EnableDragAndDropBetweenNodes="true"          Width="100%" Skin="Web20" CheckBoxes="false" CausesValidation="false" TriStateCheckBoxes="false"></telerik:RadTreeView>

onNodeDropping client function:
01.
         
function onNodeDropping(sender, args) {           
         var sourceNode = args.get_sourceNode();
         var destinationNode = args.get_destNode();
         var nodeType = sourceNode._attributes.getAttribute('<%=k_TreeNodeTypeAttribute%>');
         if (nodeType === "SP" || nodeType === "Server" || nodeType === "Company") {
             return;
         }           
         var dest = args.get_destNode();
         if (dest) {
             $telerik.$.ajax({
                 type: "POST",
                 url: "OrganizationManagement.aspx/MoveTeam",
                 data: "{'sourceID': '" + sourceNode._attributes._data.Guid + "','destinationID': '" + destinationNode._attributes._data.Guid + "'}",
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 success: function (response) {            
                     clientSideEdit(sender, args);                                               
                 },
                 error: function (xhr, err) {
 
                 }
             });              
 
         }
     }
                          

Function clientSideEdit:

function clientSideEdit(sender, args) {
            var destinationNode = args.get_destNode();
 
            if (destinationNode) {
                var firstTreeView = $find('<%= rdtrOrganization.ClientID %>');               
 
                firstTreeView.trackChanges();
                 
                var sourceNodes = args.get_sourceNodes();
                var dropPosition = args.get_dropPosition();
 
                //Needed to preserve the order of the dragged items
                if (dropPosition == "below") {
                    for (var i = sourceNodes.length - 1; i >= 0; i--) {
                        var sourceNode = sourceNodes[i];
                        sourceNode.get_parent().get_nodes().remove(sourceNode);
 
                        insertAfter(destinationNode, sourceNode);
                    }
                }
                else {
                    for (var i = 0; i < sourceNodes.length; i++) {
                        var sourceNode = sourceNodes[i];
                        sourceNode.get_parent().get_nodes().remove(sourceNode);
 
                        if (dropPosition == "over")
                            destinationNode.get_nodes().add(sourceNode);
                        if (dropPosition == "above")
                            insertBefore(destinationNode, sourceNode);
                    }
                }
                destinationNode.set_expanded(true);
                firstTreeView.commitChanges();               
            }
        }
 
        function insertAfter(destinationNode, sourceNode) {
            var destinationParent = destinationNode.get_parent();
            var index = destinationParent.get_nodes().indexOf(destinationNode);
            destinationParent.get_nodes().insert(index + 1, sourceNode);
        }
 
        function insertBefore(destinationNode, sourceNode) {
            var destinationParent = destinationNode.get_parent();
            var index = destinationParent.get_nodes().indexOf(destinationNode);
            destinationParent.get_nodes().insert(index, sourceNode);
        }

If I will not use the ajax call the function: clientSideEdit will work.

What I need to change that it will work with the ajax call.

please help me it very urgent.

Thanks in advance.

3 Answers, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 20 Mar 2014, 12:29 PM
Hi Tomer,

Can you please clarify if you get any exception on the page when you are dragging/dropping the node? And if so what is the exact exception? 

As a side note I would like to suggest that you try using the templates that are installed in Visual Studio once you install the Telerik controls (here is a short video demonstrating this suggestion).

Regards,
Kate
Telerik
 

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

 
0
Tomer
Top achievements
Rank 1
answered on 20 Mar 2014, 01:20 PM
Hi Kate,

Thanks for your answer.
As I wrote, when I am using the code above with the ajax request to the server the rebuild of the tree (Client Side) doesn't work and there aren't any exceptions.

When I am using the same code without the ajax request to the server the build of the tree (Client Side) is working.
There is a problem because of the ajax request . I can't understand why.

10x.

0
Kate
Telerik team
answered on 25 Mar 2014, 11:19 AM
Hello Tomer,

Can you please provide all the code that is needed so I can inspect your particular scenario from my side and determine what might be causing the issue that you are currently experiencing? 

Regards,
Kate
Telerik
 

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

 
Tags
TreeView
Asked by
Tomer
Top achievements
Rank 1
Answers by
Kate
Telerik team
Tomer
Top achievements
Rank 1
Share this question
or