Change Node Order via Client Side Script?

6 posts, 0 answers
  1. Karl Wilkens
    Karl Wilkens avatar
    206 posts
    Member since:
    Oct 2012

    Posted 18 Nov 2008 Link to this post

    Hi,

    Does anyone know if it is possible to move a node up or down by 1, relative to its adjacent nodes, using client side script? There are situations where drag and drop becomes difficult (many levels, etc) and we wish to give our end users an alternative. Any thoughts welcome.
  2. Emmanuel Bougnon
    Emmanuel Bougnon avatar
    10 posts
    Member since:
    Sep 2007

    Posted 25 Nov 2008 Link to this post

    Hi,

    I want to do the same things. (change node order by 1)

    Can some one help us ?

    Thanks,

    Emmanuel


  3. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 25 Nov 2008 Link to this post

    Hi guys,

    You can check this code library: Moving a node up and down using a context menu

    I hope this helps.

    Regards,
    Veselin Vasilev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  4. Emmanuel Bougnon
    Emmanuel Bougnon avatar
    10 posts
    Member since:
    Sep 2007

    Posted 25 Nov 2008 Link to this post

    Thanks Veselin ,

    Because i want to do it client side i convert the vb code to javascript code this what it done :

    case "MoveUp" : 
                                if (selectedNode) 
                                {     
                                   if (selectedNode.get_parent().get_nodes().indexOf(selectedNode)!=0) 
                                   {         
                                       var i = 0;               
                                       treeView.trackChanges(); 
                                       while (i < selectedNode.get_parent().get_nodes().get_count()) 
                                       { 
                                            if (selectedNode == selectedNode.get_parent().get_nodes().getNode(i)) 
                                            { 
                                                var tempNode = new Telerik.Web.UI.RadTreeNode(); 
                                                tempNode = selectedNode.get_parent().get_nodes().getNode(i - 1); 
                                                selectedNode.get_parent().get_nodes().removeAt(i - 1);   
                                                selectedNode.get_parent().get_nodes().insert(i, tempNode);   
                                            } 
                                            i = i + 1; 
                                       } 
                                       treeView.commitChanges();  
                                   } 
                                } 
                                break
                            case "MoveDown" : 
                                if (selectedNode) 
                                { 
                                    if (selectedNode.get_parent().get_nodes().indexOf(selectedNode)!= selectedNode.get_parent().get_nodes().get_count() -1) 
                                    { 
                                        var i = 0;           
                                        treeView.trackChanges(); 
                                        while (i < selectedNode.get_parent().get_nodes().get_count()) 
                                        { 
                                            if (selectedNode == selectedNode.get_parent().get_nodes().getNode(i)) 
                                            { 
                                                var tempNode = new Telerik.Web.UI.RadTreeNode(); 
                                                tempNode = selectedNode.get_parent().get_nodes().getNode(i + 1); 
                                                selectedNode.get_parent().get_nodes().removeAt(i + 1);   
                                                selectedNode.get_parent().get_nodes().insert(i, tempNode);   
                                            } 
                                            i = i + 1; 
                                        } 
                                    } 
                                } 
                                break

    This work fine, but because i'm using a template to node (applied server side), the nodes loses its template.

    How can i workaround this ?

    Best Regards
    Emmanuel


  5. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 27 Nov 2008 Link to this post

    Hi Emmanuel Bougnon,

    The current framework (2.0, 3.5) does not support client-side templates.

    Fortunately, the next version 4.0 will do.

    Please check this forum post: RadControls and ASP.NET Ajax 4.0 Preview

    Regards,
    Veselin Vasilev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Emmanuel Bougnon
    Emmanuel Bougnon avatar
    10 posts
    Member since:
    Sep 2007

    Posted 12 Jan 2009 Link to this post

    Hi Veselin ,

    I managed to find a workarround to use the templates during node orders changing, but this time I have problem because I'm losing the BackColor property of the moved nodes.

    case "MoveDown" : 
        if (selectedNode) 
        { 
            var currentIndex = selectedNode.get_parent().get_nodes().indexOf(selectedNode); 
            var count = selectedNode.get_parent().get_nodes().get_count(); 
            if (currentIndex != (count -1)) 
            { 
                var i = 0;           
                //var tempNode = new Telerik.Web.UI.RadTreeNode(); 
                var tempNode = selectedNode.get_parent().get_nodes().getNode(currentIndex + 1); 
                if (tempNode) 
                { 
                    treeView.trackChanges(); 
                    var selectedNodeLastIndex = GetNodeHierarchyIndex(selectedNode);                                             
                    var WasExpanded = tempNode.get_expanded(); 
                    var htmlElement = tempNode.get_contentElement(); 
                    var sLastInnerHtml = htmlElement.innerHTML; 
                    var LastIndex = GetNodeHierarchyIndex(tempNode); //selectedNode.get_parent().get_nodes().indexOf(tempNode) + 1; 
                    var category = tempNode.get_category(); 
                    var text = tempNode.get_text(); 
                    selectedNode.get_parent().get_nodes().removeAt(currentIndex + 1);   
                    selectedNode.get_parent().get_nodes().insert(currentIndex, tempNode);   
                    var newIndex  = GetNodeHierarchyIndex(tempNode);//i + 1; 
                    var re = new RegExp(LastIndex + " - " + category, 'gi'); 
                    var sLastInnerHtmlsLastInnerHtml = sLastInnerHtml.replace(re, newIndex + " - " + category) 
                     
                    //Get the DOM element which represents the node's contents  
                    var contentElement = tempNode.get_contentElement();     
                    //Update its html with the template                                           
                    contentElement.innerHTML = sLastInnerHtml;  
                     
                    tempNode.set_enabled(true); 
                    if(WasExpanded)     
                    {        
                       tempNode.set_expanded(false);     
                    }     
                    else     
                    {        
                       tempNode.set_expanded(true);      
                    }    
                                                                             
                    var htmlElement = selectedNode.get_contentElement(); 
                    var sLastInnerHtml = htmlElement.innerHTML; 
                    var category = selectedNode.get_category(); 
                    var text = selectedNode.get_text();  
                    var selectedNodeLastIndexNewIndex  = GetNodeHierarchyIndex(selectedNode);//i + 1; 
                    var re = new RegExp(selectedNodeLastIndex + " - " + category, 'gi'); 
                    var sLastInnerHtmlsLastInnerHtml = sLastInnerHtml.replace(re, selectedNodeLastIndexNewIndex + " - " + category) 
                     
                    //Get the DOM element which represents the node's contents  
                    var contentElement = selectedNode.get_contentElement();  
                    //Update its html with the template  
                    contentElement.innerHTML = sLastInnerHtml;  
                                                                                         
                    treeView.commitChanges(); 
                }                                     
            } 
        } 


    how I could set and get the BackColor property of the node on the client side.

    Thank you
Back to Top