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

Integration with RadContextMenu

Next database reset in 1 hours, 30 minutes, 17 seconds
  • Insert new item
  • Modify the selected item
  • Remove the selected item
  • Close edit/insert forms
EmployeeIDLastNameFirstNameReportsTo
12345678910
Page size:
27111pileshkiq 
 125uhuhoitgiuh27
 34Chutiya Gaandozlkkjjjkjlh 
 35TTtest 
 36xxxxxxxxxxxxxxxx15 
37BobBilly0000 
  128asd2asd237
  144joshjosh37
41HHH 
  116TesterJoe41

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