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

Edit Employees

Next database reset in 1 hours, 24 minutes, 49 seconds
  • Add Employee
  • Edit Employee
  • Remove Employee

The demo shows how to Add/Edit/Remove employees from a company's structure. In order to achive that functionality we used RadContextMenu and RadWindow controls. Please use context menu (right button click) to show the Add/Edit/Remove options.

  • DefaultCS.aspx
    • DefaultCS.aspx
    • WindowContent.aspx
  • DefaultCS.aspx.cs
    • DefaultCS.aspx.cs
    • WindowContent.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="OrgChart.Examples.ApplicationScenarios.AddEditRemoveEmployees.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg">
        <div class="qsf-demo-canvas">
            <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel" Skin="Vista"></telerik:RadAjaxLoadingPanel>
            <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1">
                <telerik:RadOrgChart RenderMode="Lightweight" runat="server" ID="RadOrgChart2" Skin="Vista" GroupColumnCount="2">
                </telerik:RadOrgChart>
                <telerik:RadContextMenu runat="server" ID="RadContextMenu1" CssClass="CustomContextMenu" OnClientItemClicked="onClientItemClicked" Skin="Default">
                    <Items>
                        <telerik:RadMenuItem Text="Add Employee" CssClass="rmAdd" Value="Add" />
                        <telerik:RadMenuItem Text="Edit Employee" CssClass="rmEdit" Value="Edit" />
                        <telerik:RadMenuItem Text="Remove Employee" CssClass="rmRemove" Value="Remove" />
                    </Items>
                </telerik:RadContextMenu>
                <telerik:RadWindow RenderMode="Lightweight" runat="server" OnClientClose="onClientClose" VisibleStatusbar="false" AutoSize="true" VisibleTitlebar="true" Modal="true" Behaviors="Close" ID="RadWindow1" NavigateUrl="WindowContent.aspx" Skin="Vista"></telerik:RadWindow>
            </telerik:RadAjaxPanel>
            <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString35 %>" SelectCommand="SELECT * FROM [EditableTeams]"></asp:SqlDataSource>
            <asp:SqlDataSource runat="server" ID="SqlDataSource2" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString35 %>" SelectCommand="SELECT * FROM [EditableEmployees]"></asp:SqlDataSource>
        </div>
    </div>
    <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
        <script type="text/javascript">
            //<![CDATA[
            Sys.Application.add_load(function () {
                window.orgChart = $find("<%= RadOrgChart2.ClientID %>");
                window.win = $find("<%= RadWindow1.ClientID%>");
                window.ajaxPanel = $find("<%= RadAjaxPanel1.ClientID %>");
                window.contextMenu = $find("<%= RadContextMenu1.ClientID %>");
                demo.initialize();
            });
            //]]>
        </script>
    </telerik:RadCodeBlock>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance