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

Integration with RadContextMenu

Next database reset in 0 hours, 55 minutes, 31 seconds
  • Insert new item
  • Modify the selected item
  • Remove the selected item
  • Close edit/insert forms
EmployeeIDLastNameFirstNameReportsTo
123456789
Page size:
15}2223 
  100232315
  1012215
17zzzssss new name5674865465 
  117TesterJan17
 18joke2457893434433489aeric3 
20LeguizamoAA23Daniel1 
  31gr4trtt443t20
  115hbgjhgjopopoo20
 21taglialatelapino 

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