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

problem with OnClientNodeDropping with JQuery AJAX

3 Answers 60 Views

TreeView

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

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.

problem with OnClientNodeDropping with JQuery AJAX

3 Answers, 1 is accepted