This is a migrated thread and some comments may be shown as answers.

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

7 Answers 322 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
darshan thacker
Top achievements
Rank 1
darshan thacker asked on 11 Apr 2012, 06:53 AM
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

7 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 11 Apr 2012, 09:41 AM
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.
0
darshan thacker
Top achievements
Rank 1
answered on 13 Apr 2012, 12:54 PM
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.
    
0
Princy
Top achievements
Rank 2
answered on 13 Apr 2012, 01:33 PM
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.
0
darshan thacker
Top achievements
Rank 1
answered on 16 Apr 2012, 07:04 AM
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.

0
Princy
Top achievements
Rank 2
answered on 17 Apr 2012, 08:41 AM
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.
0
New
Top achievements
Rank 1
answered on 08 Sep 2012, 04:25 AM
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
0
Plamen
Telerik team
answered on 10 Sep 2012, 02:03 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
TreeView
Asked by
darshan thacker
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
darshan thacker
Top achievements
Rank 1
New
Top achievements
Rank 1
Plamen
Telerik team
Share this question
or