Home - Forums-.NET - FlyTreeView (ASP.NET) - ClientSide AddNode

FlyTreeView (ASP.NET)

Technical support and KB related to the FlyTreeView control

This forum related to following products: FlyTreeView for ASP.NET

ClientSide AddNode
Link Posted: 22-Aug-2006 09:01
I am using the FlyTreeView for ASP.NET Version 2.0, build 133.  

I want to drag and drop a node from one tree onto another.  When I drop the node onto the target tree, I want to cancel the drop and manually add the node to a node I specify.  I do not want the user to be able to simply drop the node wherever they wish.  The main reason for this is because the target tree has to conform to a certain structure and can only have the children in the places I explicitly specify.  If I do not handle this manually, I will end up with children where I only want siblings.  What would be great is if the tree had a \"enable drop of sibling only\" property that would not allow children to be created, but would only create siblings.    

Anyway, I have everything working right up to the point where I want to add the node manually.  I am using the  onDragStartJavascript and OnDropJavascript properties to specify custom functions where I can get a handle to the target node and the source node.  Everything seems to be correct and I can iterate all the properties and methods of both nodes just fine.  That tells me I have the correct handle to the correct nodes.  However, I cannot seem to add a node manually on the client side.  I have tried every combination of getting a handle to the target and the source node, but still keep getting the following error:


Error Occured:
Invalid access to function to be used with node without owner treeviw.


(yes, the error has \"treeview\" and \"occurred\" spelled incorrectly and those are not a typos on my part).

I have scoured the documentation and cannot find an example of how to use [b]addNode[/b} on the client side.  Could somebody please provide a good example of how to do this?  In other words, would somebody please provide detailed code on the few lines necessary in JavaScript, on the client, to add a node to another node within a TreeView?

I also want to be able to manually reorder to nodes within the tree, but don't see a way to do that either.  

Thanks in advance!  

J.
Link Posted: 22-Aug-2006 20:25
Sorry for mistakes.

Anyway the error you get means the only thing: the node you're trying to add already has a parent node. So you should first call the node.remove() method in order to remove node from the containing collection.

Also, there's DragDropName and DragDropAcceptNames properties that allows you to define constraints for drag-and-drop operation. Don't they cover your case?
Link Posted: 23-Aug-2006 06:39
Thanks for the response EvgenyT! The strange thing is that I am trying to manually add a new node to the parent node and not to the tree itself. As a result, I don't want to remove the root node. The DragDropName and DragDropAcceptNames parameters will not completely work for my requirements due to the fact that the \"real\" requirement is to drag onto something other than the tree (such as a DIV), then I will manually add the node to a specific tree. I wanted to just get the tree drag and drop working first and then tackle that next step. This is why I need to know how to add a new node via JavaScript. My target tree looks something like this: MyRootNode --MyChild1 --MyChild2 --MyChild3 What I want to do in the example above is manually add a node \"MyChild4\" to the \"MyRootNode\" node. From what you said, I think I *might* also get the stated error if I am trying to add a node to the target tree with a \"path\" that already exists in the target tree. Is that correct? Since I couldn't figure out how to declare and instantiate a brand new node in JavaScript, I am trying to add the dragged node directly to the target node. I will paste my code below, some of which is redundant as I was just trying to find a way around the error. From what you said, it may be better for me to create a brand new node, assign the name, text and value properties and then add that new node to the root node. I would actually prefer that. How would I do this?How would I create a brand new node in JavaScript, assign it's properties and then add it to the target node? Here is my current code:

Thanks again!!! J.
Link Posted: 23-Aug-2006 23:01
I've created a small demo with creating and adding brand new node to the treeview. Here's the code: [code] <%@ Register Assembly=\"NineRays.WebControls.FlyTreeView\" Namespace=\"NineRays.WebControls\" TagPrefix=\"NineRays\" %> Untitled Page function AddNode() { var treeview = CFlyTreeView.getInstanceById(\"ftv\"); var newNode = new CFlyTreeNode(); newNode.setText(\"TheText\"); treeview.addNode(newNode); }
AddNode()
[/code] P.S. Note: You need the latest build, that contains critical fix for the addNode method.
Link Posted: 31-Aug-2006 00:53
work fine, and is also what I am looking for, but I also need to be able to set the ImageUrl, Tag, DragDropName and DragDropAcceptNames

Any help would be nice!
Link Posted: 31-Aug-2006 15:21
Yes, there's a number of methods to set client-side properties of node:
http://www.9rays.net/asp.net_2/treeview/Doc_ClientObjects.aspx

But not all of them are available from client-side. We're constantly working on adding new and new thus synchronizing client-side and server-side API.
Also the Tag property contains server-side serializable object. You should better use the Value and setValue, getValue methods to store value accessible from client-side.
Link Posted: 05-Oct-2006 12:41
EvgenyT - Do you a simular simple demo for ASP.NET 1.1 ?  

Thanks

J Scott
Link Posted: 05-Oct-2006 22:25
ASP.NET 1.1 version has the only method node.AddNodes(xmlText) where xmlText is a valid xml with the following DTD:

  
    Key CDATA #REQUIRED
  Text CDATA #IMPLIED  
  ToolTip CDATA #IMPLIED

  NavigateUrl CDATA #IMPLIED
  NavigateTarget CDATA #IMPLIED
  
  ChildNodeType CDATA #IMPLIED
  NodeType CDATA #IMPLIED
  NodeSrc CDATA #IMPLIED
  Expanded (True|False) #IMPLIED
  ExpandLevel CDATA #IMPLIED
  
  DefaultStyle CDATA #IMPLIED
  HoverStyle CDATA #IMPLIED
  SelectedStyle CDATA #IMPLIED
  SelectedHoverStyle CDATA #IMPLIED

  ImageUrl CDATA #IMPLIED
  SelectedImageUrl CDATA #IMPLIED
  ExpandedImageUrl CDATA #IMPLIED
  SelectedExpandedImageUrl CDATA #IMPLIED
  
  IconSetPath CDATA #IMPLIED
  
  PostBackOnExpand (True|False) #IMPLIED
  PostBackOnCollapse (True|False) #IMPLIED
  PostBackOnSelect (True|False) #IMPLIED
  PostBackOnDeselect (True|False) #IMPLIED
  PostBackOnCheck (True|False) #IMPLIED
  PostBackOnUncheck (True|False) #IMPLIED
  
  SelectExpands (True|False) #IMPLIED
  SelectCollapses (True|False) #IMPLIED
  
  CanBeSelected (True|False) #IMPLIED
  
  IsCheckBox (True|False) #IMPLIED
  
  IsChecked (True|False) #IMPLIED> ]>