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

4 posts, 1 answers
  1. Lee
    Lee avatar
    13 posts
    Member since:
    Jul 2010

    Posted 17 Aug 2010 Link to this post

    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.
  2. Lee
    Lee avatar
    13 posts
    Member since:
    Jul 2010

    Posted 17 Aug 2010 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Peter
    Admin
    Peter avatar
    6637 posts

    Posted 20 Aug 2010 Link to this post

    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
  5. Lee
    Lee avatar
    13 posts
    Member since:
    Jul 2010

    Posted 20 Aug 2010 Link to this post

    perfect!  Thanks!
Back to Top