New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Context Menu

  • Personal Folders
    • Deleted Items (79)
    • Drafts (2)
    • Inbox (23)
    • Junk Email (34)
    • Outbox
    • Public folders (2)
    • RSS Feeds
    • Sent Items
  • Copy ...
  • Rename ...
  • New Folder
  • Delete Folder
  • Mark All as Read
  • New Folder
  • Empty this folder
RadTreeView supports its own context menus. You can simply build these menus in design time or in the codebehind.
Either way, the approach is quite straight-forward.

The built-in context menu of the treeview supports multi-level items. In other words, you can define root items, second level items, etc. After the context menus have been added to the ContextMenus collection of the treeview, you should set the ContextMenuID property of each TreeNode so that the proper menu appears upon right-clicking a node. If the ContextMenuID property is not set, the first context menu in the ContextMenus collection will be shown upon right-clicking a node.

If you want to disable the context menu for a certain node, you should disable the EnableContextMenu property of this node.
Right-click a node with the mouse to display the context menu.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TreeView.Examples.Functionality.ContextMenu.DefaultCS"Language="c#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
      <script type="text/javascript" src="scripts.js"></script>
    <div class="demo-container size-thin">
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
            <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView1" runat="server" AllowNodeEditing="true" OnContextMenuItemClick="RadTreeView1_ContextMenuItemClick" 
                OnClientContextMenuItemClicking="onClientContextMenuItemClicking" OnClientContextMenuShowing="onClientContextMenuShowing" 
                OnNodeEdit="RadTreeView1_NodeEdit">
                <ContextMenus>
                    <telerik:RadTreeViewContextMenu ID="MainContextMenu" runat="server" 
                        enderMode="Lightweight">
                        <Items>
                            <telerik:RadMenuItem Value="Copy" Text="Copy ..." ImageUrl="~/TreeView/images/Outlook/10.gif">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Value="Rename" Text="Rename ..." Enabled="false" ImageUrl="~/TreeView/images/Outlook/rename.gif"
                                PostBack="false">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Value="NewFolder" Text="New Folder" ImageUrl="~/TreeView/images/Outlook/12.gif">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Value="Delete" Text="Delete Folder" ImageUrl="~/TreeView/images/Outlook/7.gif">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem IsSeparator="true">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Value="MarkAsRead" Text="Mark All as Read">
                            </telerik:RadMenuItem>
                        </Items>
                        <CollapseAnimation Type="none"></CollapseAnimation>
                    </telerik:RadTreeViewContextMenu>
                    <telerik:RadTreeViewContextMenu ID="EmptyFolderContextMenu" runat="server">
                        <Items>
                            <telerik:RadMenuItem Value="NewFolder" Text="New Folder" ImageUrl="~/TreeView/images/Outlook/12.gif">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem IsSeparator="true">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Value="EmptyFolder" Text="Empty this folder" ImageUrl="~/TreeView/images/Outlook/2DeletedItems.gif">
                            </telerik:RadMenuItem>
                        </Items>
                        <CollapseAnimation Type="none"></CollapseAnimation>
                    </telerik:RadTreeViewContextMenu>
                </ContextMenus>
                <Nodes>
                    <telerik:RadTreeNode Value="_Private_PersonalFolders" ImageUrl="~/TreeView/images/Outlook/1PersonalFolders.gif"
                        AllowEdit="false" Text="Personal Folders" Expanded="true">
                        <Nodes>
                            <telerik:RadTreeNode Value="_Private_DeletedItems" ImageUrl="~/TreeView/images/Outlook/2DeletedItems.gif"
                                AllowEdit="false" Text="Deleted Items (79)" Font-Bold="true" ContextMenuID="EmptyFolderContextMenu">
                                <Nodes>
                                    <telerik:RadTreeNode Text="Spam (33)" AllowEdit="true" Font-Bold="true" ImageUrl="~/TreeView/images/Outlook/folder.gif">
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode Text="Old (46)" AllowEdit="true" Font-Bold="true" ImageUrl="~/TreeView/images/Outlook/folder.gif">
                                    </telerik:RadTreeNode>
                                </Nodes>
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Value="_Private_Drafts" ImageUrl="~/TreeView/images/Outlook/3Drafts.gif"
                                AllowEdit="false" Text="Drafts (2)" Font-Bold="true">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Value="_Private_Inbox" ImageUrl="~/TreeView/images/Outlook/4Inbox.gif"
                                AllowEdit="false" Text="Inbox (23)" Font-Bold="true">
                                <Nodes>
                                    <telerik:RadTreeNode Text="Family (1)" Font-Bold="true" ImageUrl="~/TreeView/images/Outlook/folder.gif">
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode Text="Friends (2)" Font-Bold="true" ImageUrl="~/TreeView/images/Outlook/folder.gif">
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode Text="Partners" ImageUrl="~/TreeView/images/Outlook/folder.gif">
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode Text="New Offers (8)" Font-Bold="true" ImageUrl="~/TreeView/images/Outlook/folder.gif">
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode Text="Job candidates (12)" Font-Bold="true" ImageUrl="~/TreeView/images/Outlook/folder.gif">
                                    </telerik:RadTreeNode>
                                </Nodes>
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Value="_Private_JunkEmail" AllowEdit="false" Text="Junk Email (34)"
                                Font-Bold="true" ImageUrl="~/TreeView/images/Outlook/junk.gif" ContextMenuID="EmptyFolderContextMenu">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Value="_Private_OutBox" ImageUrl="~/TreeView/images/Outlook/outbox.gif"
                                AllowEdit="false" Text="Outbox">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Value="_Private_PublicFolders" ImageUrl="~/TreeView/images/Outlook/folder.gif"
                                AllowEdit="false" Text="Public folders (2)" Font-Bold="true">
                                <Nodes>
                                    <telerik:RadTreeNode Text="Favorites" ImageUrl="~/TreeView/images/Outlook/folder.gif">
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode Text="All Public Folders (2)" ImageUrl="~/TreeView/images/Outlook/folder.gif"
                                        Font-Bold="true">
                                    </telerik:RadTreeNode>
                                </Nodes>
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Value="_Private_RssFeeds" AllowEdit="false" Text="RSS Feeds"
                                ImageUrl="~/TreeView/images/Outlook/rss.gif">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Value="_Private_SentItems" ImageUrl="~/TreeView/images/Outlook/sent.gif"
                                AllowEdit="false" Text="Sent Items">
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeNode>
                </Nodes>
            </telerik:RadTreeView>
        </telerik:RadAjaxPanel>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance