ASP.NET Tree_DB - Step by step configuration -
client side implementation

Html controls

In the cs_Tree.aspx file we declare two buttons and two textboxes:

- after adding the id of the node and the node's text you may press the Add button
   to create a new node in the tree - the currently selected node will be the parent
   of the new node (there has to be a selected node)

- in order to delete nodes from the database, select the node you want to delete
   and hit the Remove button


There are two functions implemented in the cs_Tree.aspx file:

The function for adding nodes:
function addNode()
    var NodeID = document.getElementById("sNewNodeId").value;
    var NodeText = document.getElementById("sNewNodeText").value;
    if(typeof tree_selected_id != "undefined" && NodeID && NodeText)
        ob_t2_Add(tree_selected_id, NodeID, NodeText, null, "folder.gif", null);
        if(typeof tree_selected_id == "undefined")
            alert("Please select the parent of the new node!");
The function for removing nodes:
function removeSelectedNode()
    if(typeof tree_selected_id != "undefined")

These custom functions use the TreeView's ob_t2_Add and ob_t2_Remove functions
(implemented in the ob_tree_xxxx.js file, located in the tree2/script folder)


We need to update the changes into the database after each action.
We'll use the TreeView server-side events

To update the database without reloading the page, the AJAX Page control will be used.
Using this control we can send a number of variables to a server-side page for processing
(e.g. the id of the edited node, its new text etc.)
We need to specify which events should be handled on the server-side.
For this example, only 4 events will be handled:
    oTree.EventList = "OnNodeEdit,OnAddNode,OnNodeDrop,OnRemoveNode";

All the client-side events are implemented in the ob_events_xxxx.js file
(located in the tree2/script folder).

For example, the OnNodeEdit client-side event:
function ob_OnNodeEdit(id, text, prevText)
            if(typeof ob_post == "object")
                ob_post.AddParam("id", id);
                ob_post.AddParam("text", text);
                ob_post.AddParam("prevText", prevText);
                //Change "cs_TreeEvents.aspx" with the name of your server-side processing file
      "cs_TreeEvents.aspx", "OnNodeEdit");
                alert("Please add obout_AJAXPage control to your page to use the server-side events");
In this function the ob_post object was used (this is the AJAX Page client-side object).
We are preparing 3 variables to be sent to the server: the id of the node, its new text and its
previous text. These variables are created using the AddParam method.

Finally, the created parameters are sent to the cs_TreeEvents.aspx page for processing
using the post method.The name of the server-side method that will handle this event
is also specified: OnNodeEdit

For any questions send us a support request.   See How-To and Help page


« Back to summary           Server Side