TreeView Nodes & Context Menu (edit,new,delete) functionality runtime binding ?

[darshan thacker]

Hello,

Could you please help me to find some examples like treeview nodes & context menu with edit,delete,add feature on runtime binding ?
something like -

http://www.telerik.com/help/aspnet-ajax/treeview-context-menu-runtime.html


thank you.

- darshan

[Princy]

Hi Darshan,

Try the following code to bind RadTreeView and ContextMenu dynamically with edit, delete and add features.

C#:

protected void Page_Load(object sender, EventArgs e)
{

        RadTreeView RadTreeView1 = new RadTreeView();
        RadTreeView1.ID = "RadTreeView1";
        RadTreeNode node1 = new RadTreeNode();
        node1.Text = "Node1";
        node1.Value = "Node1";
        RadTreeView1.Nodes.Add(node1);
        RadTreeNode node2 = new RadTreeNode();
        node2.Text = "Node2";
        node2.Value = "Node2";
        RadTreeView1.Nodes.Add(node2);
        RadTreeNode node3 = new RadTreeNode();
        node3.Text = "Node3";
        node3.Value = "Node3";
        RadTreeView1.Nodes.Add(node3);
        form1.Controls.Add(RadTreeView1);
        RadTreeViewContextMenu contextMenu1 = new RadTreeViewContextMenu();
        RadMenuItem menuItem1 = new RadMenuItem();
        menuItem1.Text = "add";
        menuItem1.Value = "add";
        contextMenu1.Items.Add(menuItem1);
        RadMenuItem menuItem2 = new RadMenuItem();
        menuItem2.Text = "edit";
        menuItem2.PostBack = false;
        menuItem2.Value = "edit";
        contextMenu1.Items.Add(menuItem2);
        RadMenuItem menuItem3 = new RadMenuItem();
        menuItem3.Text = "delete";
        menuItem3.Value = "delete";
        contextMenu1.Items.Add(menuItem3);
        RadTreeView1.ContextMenus.Add(contextMenu1);
        RadTreeView1.ContextMenuItemClick += new RadTreeViewContextMenuEventHandler(RadTreeView1_ContextMenuItemClick);
        RadTreeView1.OnClientContextMenuItemClicked = "OnClientContextMenuItemClicking";
}
void RadTreeView1_ContextMenuItemClick(object sender, RadTreeViewContextMenuEventArgs e)
{
    RadTreeNode clickedNode = e.Node;
    switch (e.MenuItem.Value)
    {
        case "add":
            RadTreeNode newnode = new RadTreeNode();
            newnode.Text = "newnode";
            newnode.Value = "newnode";
            clickedNode.Nodes.Add(newnode);
            clickedNode.Expanded = true;
            break;
        case "delete":
            clickedNode.Remove();
            break;
    }
}

JS:

<script type="text/javascript">
    function OnClientContextMenuItemClicking(sender, args)
     {
        var menuItem = args.get_menuItem();
        var treeNode = args.get_node();
        menuItem.get_menu().hide();
        switch (menuItem.get_value())
         {
            case "edit":
                treeNode.startEdit();
                break;
         }
     }
</script>

Hope this helps,

Thanks,
Princy.

[darshan thacker]

Hey princy.

Thanks your fast reply. But this solution adds new node with always "newnode" value text and changes the parent node with the same text.
example. if i add newnode inside test it replaces test with newnode name.

could you please help out for this solution ?

thank you.
    

[Princy]

Hi Darshan,

With the above code, parent node's text is not changing with the text of newly added node in my side. In order to provide different text for newly added node, you can try the following approaches.

1)One suggestion is to add a textbox and set the text and value of newly added node's as follows.

C#:

case "add":
  RadTreeNode newnode = new RadTreeNode();
  newnode.Text = txt.Text;
  newnode.Value = txt.Text;
  clickedNode.Nodes.Add(newnode);
  clickedNode.Expanded = true;
  break;

2)Try the following to show different text for nodes dynamically.

C#:

protected const string unreadPattern = @"\(\d+\)";
case "add":
    RadTreeNode newFolder = new RadTreeNode(string.Format("New Folder {0}", clickedNode.Nodes.Count + 1));
    newFolder.Selected = true;
    clickedNode.Nodes.Add(newFolder);
    clickedNode.Expanded = true;
    if (Regex.IsMatch(clickedNode.Text, unreadPattern))
        clickedNode.Text = Regex.Replace(clickedNode.Text, unreadPattern, "(" + clickedNode.Nodes.Count.ToString() + ")");
    newFolder.Value = newFolder.GetFullPath("/");
    break;

Thanks,
Princy.

[darshan thacker]

Hi,

Thank you for your reply.

With the first approach, i have following problem
1 ) txt does not exists in current context

 RadTreeNode clickedNode = e.Node;
        switch (e.MenuItem.Value)
        {
            case "add":
                RadTreeNode newnode = new RadTreeNode();
                newnode.Text = txt.Text;
                newnode.Value = txt.Text;
                clickedNode.Nodes.Add(newnode);
                clickedNode.Expanded = true;
                break;
with second approach,
2) the all child nodes name are changing to new folder(leve count) , Is this problem becuase RadTreeNode clickedNode = e.Node;

 RadTreeNode clickedNode = e.Node;

OUTPUT
Adding nodes like -

Node1

• New Folder 1
• New Folder 2

again if i am renaming to New Folder 1 to test 1 and adding new node to Node1 then test 1 will be renamed to New Folder 1 and New Folder 3 will be added to the list.

do we need to change in javascript : OnClientContextMenuItemClicking ? for add event ?

Please help.

Thank you.

[Princy]

Hi Darshan,

In the first approach I added a textbox to set the value for new node as follows.

ASPX:

<asp:TextBox ID="txt" runat="server"></asp:TextBox>

C#:

case "add":
  RadTreeNode newnode = new RadTreeNode();
  newnode.Text = txt.Text;
  newnode.Value = txt.Text;
  clickedNode.Nodes.Add(newnode);
  clickedNode.Expanded = true;
  break;

In the second approach I can reproduce your issue and try the following code by attaching the event handler NodeEdit.

C#:

protected const string unreadPattern = @"\(\d+\)";
RadTreeView RadTreeView1 = new RadTreeView();
protected void Page_Load(object sender, EventArgs e)
 {
   RadTreeView1.ID = "RadTreeView1";
   ......
   ......
   RadTreeView1.ContextMenuItemClick += new RadTreeViewContextMenuEventHandler(RadTreeView1_ContextMenuItemClick);
   RadTreeView1.OnClientContextMenuItemClicked = "OnClientContextMenuItemClicking";
   RadTreeView1.NodeEdit+=new RadTreeViewEditEventHandler(RadTreeView1_NodeEdit);
 }
void RadTreeView1_ContextMenuItemClick(object sender, RadTreeViewContextMenuEventArgs e)
 {
   RadTreeNode clickedNode = e.Node;
   switch (e.MenuItem.Value)
    {
     case "add":
       RadTreeNode newFolder = new RadTreeNode(string.Format("New Folder {0}", clickedNode.Nodes.Count + 1));
       newFolder.Selected = true;
       clickedNode.Nodes.Add(newFolder);
       clickedNode.Expanded = true;
       if (Regex.IsMatch(clickedNode.Text, unreadPattern))
        clickedNode.Text = Regex.Replace(clickedNode.Text, unreadPattern, "(" + clickedNode.Nodes.Count.ToString() + ")");
       newFolder.Value = newFolder.GetFullPath("/");
       break;
     case "delete":
       clickedNode.Remove();
       break;
    }
 }
protected void RadTreeView1_NodeEdit(object sender, RadTreeNodeEditEventArgs e)
 {
   e.Node.Text = e.Text;
 }

Thanks,
Princy.

[New]

Hello Princy,
I have used RadTreeView.
When i click Add Folder button to create New Folder see my screen shot.
New Folder create after functionality not working.
I want Folder create should select to rename when button click.
see my coding in button click.

protected void AddFolder_OnClick(object sender, EventArgs e)
        {
            RadTreeViewContextMenu contextMenu1 = new RadTreeViewContextMenu();
            RadMenuItem menuItem1 = new RadMenuItem();

            RadTreeNode node = (RadTreeNode)TicketFoldersTreeview.SelectedNode; // New Folder Assign Sub Tree
            if (node != null)
            {
                node.Nodes.Add(new RadTreeNode("New Folder"));
            }
            int parentId = (int)Convert.ToInt32(GetNode.Value);
            Ticket_Folder ticFolder = new Ticket_Folder();
            Ticket_Folder parentFolder = DbClient.GetList<Ticket_Folder>("Ticket_Folders_ID = " + parentId)[0];

            RadTreeNode newNode = new RadTreeNode();
            string nodeName = Resources.Common.New_Folder;
            ticFolder.Ticket_Folders_Name = nodeName;
            ticFolder.Ticket_Folders_PARENT_ID = parentId;
            ticFolder.Ticket_Folders_Global = parentFolder.Ticket_Folders_Global;
            ticFolder.Ticket_Folders_People_ID = ((TBS.HelpDesk.Model.TBSSecurity)(Session["SecurityClass"])).People_ID;

            DbClient.Insert<Ticket_Folder>(ticFolder);

            newNode.Text = nodeName;
            newNode.Value = ticFolder.Ticket_Folders_ID.ToString();
            newNode.Attributes.Add("PeopleID", ((TBS.HelpDesk.Model.TBSSecurity)(Session["SecurityClass"])).People_ID.ToString());
            hdNodeCount.Value = "1";
            string strScript = "Sys.Application.add_load(function(){ EditableNode(\"" + newNode.Value + "\")})";
            ScriptManager.RegisterStartupScript(this.Page, typeof(string), "ScriptKey", strScript, true);

        }

my java script coding:

function EditableNode(value) {
        debugger
            if (document.getElementById('hdNodeCount').value == '1') {
                var tree = $find("<%= TicketFoldersTreeview.ClientID %>");
                var node = tree.findNodeByValue(value);
                if (node != null) {
                    node.startEdit();
                }
            }
        }

Thanks,
New Gene

[Plamen]

Hello,

 
I have observed the code that you pasted but unfortunately it is not quite clear from it what is not working properly in RadTreeView.

 In such case we can recommend you to refer to our on-line demo where is explained one way how to add nodes on a button click. 

Hope this will be helpful.

Greetings,
Plamen
the Telerik team