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

Creating Appointments with Drag-and-drop

Choose a Method to Insert an Appointment
Drag a Node to the Scheduler
  • Technology
    • A prosthetic arm that 'feels'
    • Wireless data from every light bulb
    • Beware conflicts of interest
    • Can we make things that make themselves?
  • Science
  • Business
  • Entertainment
  • Global Issues
  • today
April 2024
April 2024
SMTWTFS
 123456
78910111213
14151617181920
21222324252627
282930    
       
Saturday, April 20, 2024
  • Day
  • Week
  • Month
  • Timeline
all day
8AM
9AM
10AM
11AM
12PM
1PM
2PM
3PM
4PM
5PM
Show 24 hours...

The RadTreeView contains lectures which are placed under different categories. The root nodes represent the categories. The users are allowed to drag the lectures, drop them to the RadScheduler, and create appointments for them. All the information needed for the appointments is stored in the nodes. The subject of an Appointment is stores as a text of the node, the category is taken from the parent node and the duration of the lecture is stored as a custom attribute in the TreeNode. The lectures also contain information about the speakers, which is also stored as a custom attribute for each node in the RadTreeView (see the code for more information).

For the implementation of this scenario, the OnClientDropping client-side event of the TreeView is used. This method contains the DOM element of the area where the node is dropped. When the DOM element is a TimeSlot of the RadScheduler, an appointment in created by inserting it directly or by using the advanced form. In addition to that, a ToolTip is activated when the user clicks on an appointment. The implementation of the RadToolTip and its configuration according to the appointments' information, is also done entirely by the client-side API of the RadToolTip.
This demo shows how you can easily create appointments in the RadScheduler by dragging and dropping elements from an external control. You also have the option to either directly create an appointment or create it by using the AdvancedInserForm. Note that the root nodes of the RadTreeView can not be dragged and dropped.
This functionality is implemented using the client-side API of the RadTreeView and the RadScheduler.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Scheduler.Examples.CreatingAppointmentsWithDragAndDrop.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadScheduler1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" ZIndex="2500">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            /* <![CDATA[ */
            Sys.Application.add_load(function () {
                demo.schedulerId = "<%= RadScheduler1.ClientID %>";
                demo.radioButtonListId = "<%=RadioButtonListChooseInsert.ClientID %>";
                demo.hiddenInputAppointmentInfo = "<%=HiddenInputAppointmentInfo.ClientID%>";
                demo.tooltip = $find('<%=RadToolTip1.ClientID %>');

                $telerik.$('#' + demo.radioButtonListId).click(radioButtonListChooseInsert_click);
            });
            /* ]]> */
        </script>
        <script type="text/javascript" src="scripts.js"></script>
    </telerik:RadScriptBlock>
    <div class="demo-container">
        <div class="demo-settings">
            <div class="divRadios">
                <span><strong>Choose a Method to Insert an Appointment</strong></span>
                <asp:RadioButtonList ID="RadioButtonListChooseInsert" runat="server" RepeatDirection="Vertical">
                    <asp:ListItem Text="Directly insert an appointment" Value="DirectInsert" Selected="true"></asp:ListItem>
                    <asp:ListItem Text="Use advanced form to insert an appointment" Value="AdvancedInsert"></asp:ListItem>
                </asp:RadioButtonList>
            </div>
            <div class="background">
            </div>
        </div>
        <div class="divTree">
            <span><strong>Drag a Node to the Scheduler</strong></span>
            <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView1" runat="server" EnableDragAndDrop="True" Width="370px"
                OnClientNodeDropping="nodeDropping">
                <Nodes>
                    <telerik:RadTreeNode Value="1" Text="Technology" AllowDrag="false" Expanded="true">
                        <Nodes>
                            <telerik:RadTreeNode Text="A prosthetic arm that 'feels'" Speaker="Todd Kuiken" Duration="90" />
                            <telerik:RadTreeNode Text="Wireless data from every light bulb" Speaker="Harald Haas" Duration="50" />
                            <telerik:RadTreeNode Text="Beware conflicts of interest" Speaker="Dan Ariely" Duration="60" />
                            <telerik:RadTreeNode Text="Can we make things that make themselves?" Speaker="Skylar Tibbits" Duration="40" />
                        </Nodes>
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Value="2" Text="Science" AllowDrag="false">
                        <Nodes>
                            <telerik:RadTreeNode Text="Finding life we can't imagine" Speaker="Christoph Adami" Duration="70">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="The real reason for brains" Speaker="Daniel Wolpert" Duration="80">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Making matter come alive" Speaker="Lee Cronin" Duration="90">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Finding planets around other stars" Speaker="Lucianne Walkowicz" Duration="50">
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Value="3" Text="Business" AllowDrag="false">
                        <Nodes>
                            <telerik:RadTreeNode Text="3 things I learned while my plane crashed" Speaker="Ric Elias" Duration="70">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="The surprising math of cities and corporations" Speaker="Geoffrey West" Duration="60">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="How the market can keep streams flowing" Speaker="Rob Harmon" Duration="50">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="How to use experts -- and when not to" Speaker="Noreena Hertz" Duration="90">
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Value="4" Text="Entertainment" AllowDrag="false">
                        <Nodes>
                            <telerik:RadTreeNode Text="On being just crazy enough" Speaker="Joshua Walters" Duration="70">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="A flirtatious aria" Speaker="Danielle de Niese" Duration="60">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="A history of the universe in sound" Speaker="Honor Harger" Duration="80">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="The magic of truth and lies (and iPods)" Speaker="Marko Tempest" Duration="50">
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Value="5" Text="Global Issues" AllowDrag="false">
                        <Nodes>
                            <telerik:RadTreeNode Text="We can recycle plastic" Speaker="Mike Biddle" Duration="50">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Learning from a barefoot movement" Speaker="Bunker Roy" Duration="40">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="How the economic inequality harms societies" Speaker="Rickard Wilkinson" Duration="70">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Ending hunger now" Speaker="Josette Sheeran" Duration="30">
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeNode>
                </Nodes>
                <CollapseAnimation Duration="100" Type="OutQuint" />
                <ExpandAnimation Duration="100" />
            </telerik:RadTreeView>
        </div>
        <div class="schedulerPositioning">
            <telerik:RadAjaxPanel ID="RadAjaxPanel" runat="server">
                <telerik:RadScheduler RenderMode="Lightweight" runat="server" ID="RadScheduler1" StartInsertingInAdvancedForm="true"
                    OnClientAppointmentClick="appointmentClick" OnClientAppointmentMoving="appointmentMoving"
                    OnClientFormCreated="formCreated" EnableDescriptionField="true" OverflowBehavior="Auto">
                    <AdvancedForm Modal="true"></AdvancedForm>
                </telerik:RadScheduler>
                <input id="HiddenInputAppointmentInfo" name="HiddenInputAppointmentInfo" type="hidden"
                    runat="server">
            </telerik:RadAjaxPanel>
            <telerik:RadToolTip RenderMode="Lightweight" ID="RadToolTip1" runat="server" RelativeTo="Element" Position="BottomCenter"
                AutoCloseDelay="0" ShowEvent="FromCode" Width="250px">
                <div id="contentContainer">
                    <div id="startTime">
                    </div>
                    <div id="endTime">
                    </div>
                    <div id="subject">
                    </div>
                    <div id="category">
                    </div>
                </div>
            </telerik:RadToolTip>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance