Add/Edit/Delete buttons for Telerik RadTreeView control

Question

Currently, I am using RadTreeView Telerik control for showing hierarchical data along withadd/edit/delete functionalities for each node. Using TreeView - Context Menu, that has been achieved, but I am trying to implement it as shown in below:

It works the following way: a) When a node is expanded by clicking "+" icon, "Add Group" button is visible at the bottom of its last child. b) When a node is selected, "Edit" and "Delete" icons appear.

On clicking any of those icons will open a Dialog for respective actions.

So, I need to replace Context Menu with the display shown in mock. I tried to use NodeTemplate something like below:

<NodeTemplate>
        <div>
            <span>Test</span>
        </div>
    </NodeTemplate>

but, it makes the text of all nodes as "Test".

Can somebody please help me out?

score 2 · Answer 1 · answered Feb 24 '20 at 11:46

<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,

score 0 · Answer 2 · answered Feb 25 '20 at 04:09

I implemented the RadTreeView in serverside. I though it is easy to manage in server side, specially when it comes to binding and handling the events

This is my Default.aspx.cs

using Telerik.Web.UI;

 public partial class Default : System.Web.UI.Page 
    {
        private void Page_Load(object sender, System.EventArgs e)
        {

        }

        protected void RadTreeView1_NodeEdit(object sender, RadTreeNodeEditEventArgs e)
        {
          // This is the serverside event that is triggered on Edit
            RadTreeNode nodeEdited = e.Node;  // This is the current node that is clicked
            string newText = e.Text;
            nodeEdited.Text = newText;
        }

      //
      //.........
      //.........
    }

This is something extra. In server-side you can also find a node like this,

RadTreeNode node = RadTreeView1.FindNodeByText("TestOne");
// now edit and change any test
node.Text = "Test";

I hope this helps.

Add/Edit/Delete buttons for Telerik RadTreeView control

2 Answers2