problem with OnClientNodeDropping with JQuery AJAX

4 posts, 0 answers
  1. Tomer
    Tomer avatar
    14 posts
    Member since:
    Feb 2011

    Posted 18 Mar 2014 Link to this post

    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.
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 20 Mar 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tomer
    Tomer avatar
    14 posts
    Member since:
    Feb 2011

    Posted 20 Mar 2014 in reply to Kate Link to this post

    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.

  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 25 Mar 2014 Link to this post

    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.

     
Back to Top