Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

How do I Add a User Control to RadTreeView Item Template Node upon ContextMenu Click Add

3 Answers 156 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Lee
Top achievements
Rank 1
Lee asked on 17 Aug 2010, 05:22 PM
Basically have a treeview that has a title as the first node and upon contextmenu selection you add a user control to the item template...

I'm assuming upon the e.menuitem.value on the case statement you would add that user control to the item template on that node but how do you add it dynamically?

thanks in advance.

3 Answers, 1 is accepted

Sort by
0
Lee
Top achievements
Rank 1
answered on 17 Aug 2010, 09:40 PM
ok i've got to add my usercontrol to the node but two things occur.  one. the node doesn't pick up the correct context menu on the usercontrol node.  two. when I try to add a second instance of the same control it replaces the control with text.  here is code below.

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="AddChecklist.aspx.vb"
    Inherits="CheckList_Test.AddChecklist" %>
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <script type="text/javascript">
        function SetHandleDock(dock, args) {
            dock.set_handle(document.getElementById("Handle_" + dock.get_id()));
        }
        //<!--
        function onClientContextMenuShowing(sender, args) {
            var treeNode = args.get_node();
            treeNode.set_selected(true);
            //enable/disable menu items
            setMenuItemsState(args.get_menu().get_items(), treeNode);
        }
 
        //this method disables the appropriate context menu items
        function setMenuItemsState(menuItems, treeNode) {
            for (var i = 0; i < menuItems.get_count(); i++) {
                var menuItem = menuItems.getItem(i);
                switch (menuItem.get_value()) {
                    case "Copy":
                        formatMenuItem(menuItem, treeNode, 'Copy "{0}"');
                        break;
                    case "Rename":
                        formatMenuItem(menuItem, treeNode, 'Rename "{0}"');
                        break;
                    case "Delete":
                        formatMenuItem(menuItem, treeNode, 'Delete "{0}"');
                        break;
                    case "NewFolder":
                        if (treeNode.get_parent() == treeNode.get_treeView()) {
                            menuItem.set_enabled(false);
                        }
                        else {
                            menuItem.set_enabled(true);
                        }
                        break;
                    case "MarkAsRead":
                        var enabled = hasNodeMails(treeNode);
                        menuItem.set_enabled(enabled != null);
                        break;
                }
            }
        }
 
        //formats the Text of the menu item
        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);
            }
            var newText = String.format(formatString, extractTitleWithoutMails(treeNode));
            menuItem.set_text(newText);
        }
 
        //checks if the text contains (digit)
        function hasNodeMails(treeNode) {
            return treeNode.get_text().match(/\([\d]+\)/ig);
        }
 
        //removes the brackets with the numbers,e.g. Inbox (30)
        function extractTitleWithoutMails(treeNode) {
            return treeNode.get_text().replace(/\s*\([\d]+\)\s*/ig, "");
        }
        //-->
 
    </script>
    <div>
        <table>
            <tr>
                <td>
                    <telerik:RadTreeView ID="RadTreeView1" runat="server" Width="500px" AllowNodeEditing="True"
                        OnContextMenuItemClick="RadTreeView1_ContextMenuItemClick" OnClientContextMenuShowing="onClientContextMenuShowing"
                        OnNodeEdit="RadTreeView1_NodeEdit">
                        <ContextMenus>
                            <telerik:RadTreeViewContextMenu ID="Section">
                                <Items>
                                    <telerik:RadMenuItem Value="AddSection" Text="Add Section">
                                    </telerik:RadMenuItem>
                                </Items>
                                <CollapseAnimation Type="none" />
                            </telerik:RadTreeViewContextMenu>
                            <telerik:RadTreeViewContextMenu ID="Group">
                                <Items>
                                    <telerik:RadMenuItem Value="AddGroup" Text="Add Group">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Value="EditSection" Text="Edit Section">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Value="RemoveSection" Text="Remove Section">
                                    </telerik:RadMenuItem>
                                </Items>
                                <CollapseAnimation Type="none" />
                            </telerik:RadTreeViewContextMenu>
                            <telerik:RadTreeViewContextMenu ID="Question">
                                <Items>
                                    <telerik:RadMenuItem Value="AddQuestion" Text="Add Question">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Value="RemoveGroup" Text="Edit Group">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Value="RemoveQuestion" Text="Remove Group">
                                    </telerik:RadMenuItem>
                                </Items>
                                <CollapseAnimation Type="none" />
                            </telerik:RadTreeViewContextMenu>
                            <telerik:RadTreeViewContextMenu ID="LastQuestion">
                                <Items>
                                    <telerik:RadMenuItem Value="EditQuestion" Text="Edit Question">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Value="RemoveQuestion" Text="Remove Question">
                                    </telerik:RadMenuItem>
                                </Items>
                                <CollapseAnimation Type="none" />
                            </telerik:RadTreeViewContextMenu>
                        </ContextMenus>
                    </telerik:RadTreeView>
                </td>
                <td>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

code behind only adds simple user control of textbox for now as i'll add radcombobox etc as i move forward.
Imports Telerik.Web.UI
Imports System.Collections.Generic
Imports System
Imports System.Collections
Imports System.ComponentModel
Imports System.Data
Imports System.Drawing
Imports System.Web
Imports System.Web.SessionState
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.HtmlControls
 
Public Class AddChecklist
    Inherits System.Web.UI.Page
 
    Private Enum enViews
        CheckList
        Section
        Group
        Question
    End Enum
 
    Protected Const unreadPattern As String = "\(\d+\)"
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Me.IsPostBack = False Then
            Dim tn As New RadTreeNode
            tn.Text = "New CheckList"
            tn.Value = 0
            txtCheckListText.Text = "New CheckList"
            RadTreeView1.Nodes.Add(tn)
 
        End If
        For Each node As RadTreeNode In RadTreeView1.GetAllNodes()
            If (node.Level = 0) Then
                node.ContextMenuID = "Section"
            ElseIf (node.Level = 1) Then
                node.ContextMenuID = "Group"
            ElseIf (node.Level = 2) Then
                node.ContextMenuID = "Question"
            ElseIf (node.Level = 3) Then
                node.ContextMenuID = "LastQuestion"
            End If
        Next
    End Sub
 
    Protected Sub RadTreeView1_NodeEdit(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadTreeNodeEditEventArgs) Handles RadTreeView1.NodeEdit
        e.Node.Text = e.Text
    End Sub
 
    Protected Sub RadTreeView1_ContextMenuItemClick(ByVal sender As Object, ByVal e As RadTreeViewContextMenuEventArgs)
        Dim clickedNode As RadTreeNode = e.Node
        Select Case e.MenuItem.Value
            Case "AddSection"
                Dim pnl1 As New Panel()
                Dim myControl As Control = LoadControl("~/uc/ucSection.ascx")
                Dim newNode As New RadTreeNode("New Section", clickedNode.Nodes.Count + 1)
                myControl.ID = "ucSection"
                pnl1.Controls.Add(myControl)
                newNode.Controls.Add(pnl1)
                newNode.Selected = True
                clickedNode.Nodes.Add(newNode)
                clickedNode.Expanded = True
 
                Exit Select
            Case "AddGroup"
                Dim newFolder As New RadTreeNode(String.Format("New Group", clickedNode.Nodes.Count + 1))
                clickedNode.Nodes.Add(newFolder)
                clickedNode.Expanded = True
                Exit Select
            Case "AddQuestion"
                Dim newFolder As New RadTreeNode(String.Format("New Question", clickedNode.Nodes.Count + 1))
                clickedNode.Nodes.Add(newFolder)
                clickedNode.Expanded = True
                Exit Select
            Case "RemoveSection"
                clickedNode.Remove()
                Exit Select
            Case "RemoveGroup"
                clickedNode.Remove()
                Exit Select
            Case "RemoveQuestion"
                clickedNode.Remove()
                Exit Select
        End Select
    End Sub
End Class
0
Accepted
Peter
Telerik team
answered on 20 Aug 2010, 11:27 AM
Hello Lee,

1. You rely in the Page_Load event to set the ContextMenuID property. However, when you add a new tree node, the page load event occurs before the ContextMenuItemClick event, so the ContextMenuID proerty is never set for the new node. You should assign the context menus like this:

Protected Sub RadTreeView1_ContextMenuItemClick(ByVal sender As Object, ByVal e As RadTreeViewContextMenuEventArgs)
    Dim clickedNode As RadTreeNode = e.Node
    Select Case e.MenuItem.Value
        Case "AddSection"
            Dim pnl1 As New Panel()
            Dim myControl As Control = LoadControl("ucSection.ascx")
            Dim newNode As New RadTreeNode("New Section", clickedNode.Nodes.Count + 1)
            myControl.ID = "ucSection"
            pnl1.Controls.Add(myControl)
            newNode.Controls.Add(pnl1)
            newNode.Selected = True
            newNode.ContextMenuID = "Group"
            clickedNode.Nodes.Add(newNode)
            clickedNode.Expanded = True

2. Dynamically added controls have to be recreated after each postback. With this in mind, please try the following:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
       If Me.IsPostBack = False Then
           Dim tn As New RadTreeNode
           tn.Text = "New CheckList"
           tn.Value = 0
           'txtCheckListText.Text = "New CheckList"
           RadTreeView1.Nodes.Add(tn)
       End If
       For Each node As RadTreeNode In RadTreeView1.GetAllNodes()
           If (node.Level = 0) Then
               node.ContextMenuID = "Section"
           ElseIf (node.Level = 1) Then
               node.ContextMenuID = "Group"
               Dim pnl1 As New Panel()
               Dim myControl As Control = LoadControl("ucSection.ascx")
               myControl.ID = "ucSection"
               pnl1.Controls.Add(myControl)
               node.Controls.Add(pnl1)


Regards,
Peter
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Lee
Top achievements
Rank 1
answered on 20 Aug 2010, 08:10 PM
perfect!  Thanks!
Tags
TreeView
Asked by
Lee
Top achievements
Rank 1
Answers by
Lee
Top achievements
Rank 1
Peter
Telerik team
Share this question
or