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

Integration with RadContextMenu

Next database reset in 1 hours, 8 minutes, 2 seconds
  • Insert new item
  • Modify the selected item
  • Remove the selected item
  • Close edit/insert forms
EmployeeIDLastNameFirstNameReportsTo
12
Page size:
2Fullerxxxxxxxxxtate 
  1granola1 xxxx1212chewyaawxw2
  3LeverlingJanette2
 4PeacockMargaretcx2
 5BuchananSteven2
  8CallahanLaura2
  13張詔欽2
 10CoxMik 
 12aa 
 14EverWhat 

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