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

Integration with RadContextMenu

Next database reset in 0 hours, 42 minutes, 33 seconds
  • Insert new item
  • Modify the selected item
  • Remove the selected item
  • Close edit/insert forms
EmployeeIDLastNameFirstNameReportsTo
123456
Page size:
 15SmithJim1 
17zzzzorroeeee 
  28yyyyyyZZZZZZ17
 18emmanueleric 
20LeguizamoDaniel 
  31gr4trtt443t20
 21taglialatelapino 
 22plutopippozz 
23MidoriTakana 
  26TakagiYamamoto23

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