obout inc - Tree_DB - Tutorial, client side

obout inc - obout_tree_DB updates database after treeview events automatically - Tutorial

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

Functions

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);
    }
    else
    {
        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")
    {
        ob_t2_Remove(tree_selected_id);
    }            
}

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

Events

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

To update the database without reloading the page, the AJAXPage 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(ob_ev("OnNodeEdit"))
        {
            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
                ob_post.post("cs_TreeEvents.aspx", "OnNodeEdit");
            }
            else
            {
                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 AJAXPage 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

Please, ask any questions support@obout.com. See How-To page

« Back to summary Server Side

Please visit HOW-TO and Help page for any questions.

"Thank you!!! ... Awesome customer service!! :)"

Romi Kovacs

Questions? Send email to support@obout.com | Contact Us