Change Node Order via Client Side Script?

[Karl Wilkens]

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.

[Emmanuel Bougnon]

Hi,

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

Can some one help us ?

Thanks,

Emmanuel

[Veselin Vasilev]

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.

[Emmanuel Bougnon]

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

[Veselin Vasilev]

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.

[Emmanuel Bougnon]

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