Hi,
Thanks for posting in the forum. Some of your questions does require JavaScript, but we will give you sample code below so that you can copy and paste and see how it works. As to your questions:
#1. Cancel NavigateURL on dropYou can handle the TreeView's ClientSideOnDropDrop and ClientSideOnItemClick event. Inside your ClientSideOnDropDrop handler, you would record the current time and save it as "last drop time", and inside your ClientSideOnItemClick you would compare the current time with your "last drop time", if these two time values are close enough, then it means the item click event is triggered by a drop. In this case you would cancel this event. The following snippet provides all the code needed to implement this logic:
Code: HTML/ASPX
<eo:TreeView runat="server" ....
ClientSideOnDragDrop="dragdrop_handler"
ClientSideOnItemClick="itemclick_handler" ....>
.....
</eo:TreeView>
//Global variable to record last drop time
Code: JavaScript
var g_LastDropTime;
function dragdrop_handler()
{
//This function is called when you drop a node
//We save the current time into g_LastDropTime
g_LastDropTime = new Date();
}
function itemclick_handler()
{
//This function is called when item click is about
//to be fired (before NavigateUrl is carried out)
var time = new Date();
//We compare the current time with g_LastDropTime
//and if the two are close enough (less than 100ms)
//then the item click is triggered by a drop. In this
//case we simply return false to cancel the event
if (g_LastDropTime &&
(time.getTime() - g_LastDropTime.getTime() < 100))
return false;
}
#2.1 Add & deleteEdit can be done directly on client side, while add and delete must be done on the server side. Doing it on the client side is faster since it does not cost a round trip to the server. It also offers better user experience because it does not do a full page reload. The second problem can be avoided by performing a partial page update (see #3.2 below).
To add a TreeNode, you simply creates a new TreeNode object and add it to the TreeView (very much similar to what you do with a desktop application). The following code adds a new TreeNode to the root:
Code: C#
EO.Web.TreeNode newNode = new EO.Web.TreeNode("new node");
TreeView1.Nodes.Add(newNode);
The following code adds a new child TreeNode to the second top level nodes:
Code: C#
TreeView1.Nodes[1].ChildNodes.Add(newNode);
The following code adds a new child TreeNode to the selected node:
Code: C#
TreeView1.SelectedNode.ChildNodes.Add(newNode);
You may want to take a look of the related class references in the documentation for TreeView, TreeNode, TreeNodeCollection etc.
Delete a node is similar. The following code delete the first top level node:
Code: C#
TreeView1.Nodes.RemoveAt(0);
All the code can be triggered by a regular server button control.
2.2 Edit nodeEdit node is different. You must do it on the client side. The following code put the current selected node into edit mode:
Code: HTML/ASPX
<a href="javascript:EditSelectedNode()">Edit Node</a>
Code: JavaScript
function EditSelectedNode()
{
//Get the selected node
var treeView = eo_GetObject("TreeView1");
var selectedNode = treeView.getSelectedNode();
//Put the selected node into edit mode
if (selectedNode)
selectedNode.beginEdit();
}
#3.1: SaveThere are two types of changes that you will need to consider:
1. Changes that are initiated from your server side code, such as add or delete. This is very simple. In this case, you update your DB when you database when you update the TreeView. For example, when user click "Add" button, the page goes back to the server side and call your button event handler, you add a new node to the TreeView and then update your database accordingly;
2. Changes that are initiated from the client side, such as drag drop and node editing. This is more complicated because you will not be able to update your database right away when the event occurs. For example, user can drag node A into B, then drag it out of B and into C and all are done on the client side. All such actions are logged on the client side and when the page is eventually posted back to the server (for example, by your Save button), the TreeView will calls corresponding event handler so that you can update database accordingly. For example, in the previous case where A is moved into B and then into C, ItemMoved event will be called twice. You can handle that event and update your database based on the event arguments. (ItemRenamed event for node editing).
Here is a working example that demonstrates how to handle ItemMoved event:
http://demo.essentialobjects.com/Default.aspx?path=TreeView\_i2\_i0You can take a look of the sample source code to see how it works. You have the full source code on your local drive.
Regardless what type of update, the basic rule is actually quite simple: you handle the corresponding server event and update your database inside that event handler. For example, when user click a Button to add a new node, you handle that Button's Click event and update your DB there (also update the TreeView); When user moved a node, you handle the TreeView's ItemMoved event and update your DB there (you do not need to update the TreeView here since it has already been updated);
#3.2 Partial page updatePartial page update is very simple. We would suggest you try to get all the previous steps working first and then implement partial page update. To implement partial page update with our CallbackPanel, you simply put the TreeView inside a CallbackPanel and then set the CallbackPanel's Triggers property to include the "trigger" controls, for example, your "Add", "Delete" or "Save" button and you are all set.
Hope this can get you going. Please feel free to let us know if you have any more questions.
Thanks!