Telerik Tree to Add, Edit, Delete, Move Up and Move Down Nodes

Hi All,

We had a requirement to have a Telerik Tree to perform the below operations on Nodes:

a. Add a Node
b. Edit a Node
c. Delete a Node
d. Move Up a Node
e. Move Down a Node
f. Drag and Drop Nodes with in Tree

We will be having XML in a separate XML file (TelerikTreeXML.xml). Below is the mock up of how it looks:

<?xml version='1.0' encoding='utf-8'?>

<Tree>
  <Node Text='ParentNode1' Expanded='False'></Node>
  <Node Text='ParentNode2' Expanded='False'></Node>
  <Node Text='ParentNode3' Expanded='False'></Node>
  <Node Text='ParentNode4' Expanded='False'></Node>
  <Node Text='ParentNode5' Expanded='False'></Node>
</Tree>

We need to load this XML content from TelerikTreeXML.xml file and bind it to the Tree as shown below:

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        RadTreeView.LoadContentFile("~/XML/XMLFile.xml");
    }
}

We have a context menu which will be displayed on right click of a node as shown in below image:

Below is the code to display context menu (Javascript)

function setMenuItemsState(menuItems, treeNode) {
    for (var i = 0; i < menuItems.get_count(); i++) {
        var menuItem = menuItems.getItem(i);
        switch (menuItem.get_value()) {
            case "1":
                formatMenuItem(menuItem, treeNode, 'Add');
                break;
            case "2":
                formatMenuItem(menuItem, treeNode, 'Edit');
                if (treeNode.get_level() == 0) {
                    menuItem.set_enabled(false);
                }
                break;
            case "3":
                formatMenuItem(menuItem, treeNode, 'Delete');
                if (treeNode.get_level() == 0) {
                    menuItem.set_enabled(false);
                }
                break;
            case "4":
                formatMenuItem(menuItem, treeNode, 'Move Up');
                if (treeNode.get_isFirst() == true || treeNode.get_level() == 0) {
                    menuItem.set_enabled(false);
                }

                break;
            case "5":
                formatMenuItem(menuItem, treeNode, 'Move Down');
                if (treeNode.get_isLast() == true || treeNode.get_level() == 0) {
                    menuItem.set_enabled(false);
                }
        }
    }
}

and here is the code for formatMenuItem function:

function formatMenuItem(menuItem, treeNode, formatString) {
    var nodeValue = treeNode.get_value();
    if (nodeValue && nodeValue.indexOf("_Private_") == 0) {
        menuItem.set_enabled(false);
    }
    else {
        menuItem.set_enabled(true);
    }
}

The operations supported for each and every node depends on the type of node selected. For Example, if the node is Parent Node (that is at first level), then only "Add" operation is supported. Add operation will add child nodes to the selected node. Similarly, if there is only one child for a particular node, then "Move Up" and "Move Down" operations will be disabled. The Enabling/Disabling of node will be taken care by formatMenuItem function.

The below is the code for Telerik:RadTreeView

The below is the link for code used to implement this Tree. Note that this is rough piece of code and is not formatted/optimized. Use it at your own risk.

https://skydrive.live.com/redir?resid=D6A20558D41A4EB9!5260

Enjoy and let me know your comments. Have a great day !!!