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

8 posts, 0 answers
  1. darshan thacker
    darshan thacker avatar
    8 posts
    Member since:
    Dec 2009

    Posted 11 Apr 2012 Link to this post

    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
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 11 Apr 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. darshan thacker
    darshan thacker avatar
    8 posts
    Member since:
    Dec 2009

    Posted 13 Apr 2012 Link to this post

    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.
        
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 13 Apr 2012 Link to this post

    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.
  6. darshan thacker
    darshan thacker avatar
    8 posts
    Member since:
    Dec 2009

    Posted 16 Apr 2012 Link to this post

    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.

  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 Apr 2012 Link to this post

    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.
  8. New
    New  avatar
    25 posts
    Member since:
    Jul 2012

    Posted 07 Sep 2012 Link to this post

    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
  9. Plamen
    Admin
    Plamen avatar
    2730 posts

    Posted 10 Sep 2012 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017