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

Integration with RadContextMenu

Next database reset in 0 hours, 27 minutes, 28 seconds
  • Insert new item
  • Modify the selected item
  • Remove the selected item
  • Close edit/insert forms
EmployeeIDLastNameFirstNameReportsTo
12345678
Page size:
 24Check out the designJim5 
 27ljlwww12elk 
 33erterttert 
 34yadavAm3 Kumar 
 35ttttttttttjk golden 
 36xxxxxxxxxxxxxxxx1 
 37BobBilly 
41HHH 
  116TesterJoe41
 42sdfgsdfg 

This example demonstrates how to integrate RadContextMenu within RadTreeList. In order to display the context menu you should click over a tree list item using the right mouse button. Note that you can delete items recursively (AllowRecursiveDelete="true") on all hierarchy levels. Detailed information about the features shown in this demo:

  • Displaying RadContextMenu with client-side code. Notice the condition that checks whether the target element is a table cell.
  • Firing custom command (CancelAll) from the client which is then handled in code-behind.
  • Firing built-in commands (InitInsert, Edit, Delete) with fireCommand.
  • Validating the required fields by adding RequiredFieldValidators on ItemCreated.
  • Clearing the edit/insert indexes manually. This causes all edit/insert forms to close.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • script.js
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Integration.TreeListWithContextMenu.DefaultCS"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script src="script.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator RenderMode="Lightweight" ID="QsfFromDecorator" runat="server" DecorationZoneID="rfd-demo-zone" DecoratedControls="All" EnableRoundedCorners="false" />
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
        <telerik:RadContextMenu ID="RadContextMenu1" runat="server" OnClientItemClicked="demo.onClientItemClicked">
            <Items>
                <telerik:RadMenuItem Text="Insert new item" Value="InitInsert"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Modify the selected item" Value="Edit"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Remove the selected item" Value="Delete"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Close edit/insert forms" Value="CancelAll"></telerik:RadMenuItem>
            </Items>
        </telerik:RadContextMenu>
        <div class="demo-container" id="rfd-demo-zone" style="max-width: 800px">
            <telerik:RadTreeList RenderMode="Lightweight" ID="RadTreeList1" runat="server" AllowPaging="True" DataSourceID="SqlDataSource1" DataKeyNames="EmployeeID" ParentDataKeyNames="ReportsTo" AutoGenerateColumns="False" OnItemCommand="RadTreeList1_ItemCommand" OnItemCreated="RadTreeList1_ItemCreated" AllowRecursiveDelete="true">
                <ClientSettings>
                    <ClientEvents OnItemContextMenu="demo.onItemContextMenu"></ClientEvents>
                    <Selecting AllowItemSelection="True"></Selecting>
                </ClientSettings>
                <Columns>
                    <telerik:TreeListBoundColumn DataField="EmployeeID" HeaderText="EmployeeID" UniqueName="EmployeeID" ReadOnly="true"></telerik:TreeListBoundColumn>
                    <telerik:TreeListBoundColumn DataField="LastName" HeaderText="LastName" UniqueName="LastName"></telerik:TreeListBoundColumn>
                    <telerik:TreeListBoundColumn DataField="FirstName" HeaderText="FirstName" UniqueName="FirstName"></telerik:TreeListBoundColumn>
                    <telerik:TreeListBoundColumn DataField="ReportsTo" HeaderText="ReportsTo" UniqueName="ReportsTo"></telerik:TreeListBoundColumn>
                </Columns>
            </telerik:RadTreeList>
        </div>
    </telerik:RadAjaxPanel>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>" SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [ReportsTo] FROM [Employees]" DeleteCommand="DELETE FROM [Employees] WHERE [EmployeeID] = @EmployeeID" InsertCommand="INSERT INTO [Employees] ([LastName], [FirstName], [ReportsTo]) VALUES (@LastName, @FirstName, @ReportsTo)" UpdateCommand="UPDATE [Employees] SET [LastName] = @LastName, [FirstName] = @FirstName, [ReportsTo] = @ReportsTo WHERE [EmployeeID] = @EmployeeID">
        <DeleteParameters>
            <asp:Parameter Name="EmployeeID" Type="Int32"></asp:Parameter>
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="LastName" Type="String"></asp:Parameter>
            <asp:Parameter Name="FirstName" Type="String"></asp:Parameter>
            <asp:Parameter Name="ReportsTo" Type="Int32"></asp:Parameter>
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="LastName" Type="String"></asp:Parameter>
            <asp:Parameter Name="FirstName" Type="String"></asp:Parameter>
            <asp:Parameter Name="ReportsTo" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="EmployeeID" Type="Int32"></asp:Parameter>
        </UpdateParameters>
    </asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance