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

External Edit in RadDock

  • today
December 2024
December 2024
SMTWTFS
       
1234567
891011121314
15161718192021
22232425262728
293031    
Wednesday, December 25, 2024
  • Day
  • Week
  • Month
  • Timeline
all day
8AM
9AM
10AM
11AM
12PM
1PM
2PM
3PM
4PM
5PM
Show 24 hours...
  • Edit
  • Delete
  • New Appointment
  • New Recurring Appointment
  • Go to today
  • Show 24 hours...

Click Snooze to be reminded again in:
Snooze
5 minutes before start

This example demonstrates how RadDock can be used to replace the advanced edit or insert form in the RadScheduler. Double click an appointment or a time slot to show RadDock.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • Styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Scheduler.Examples.RadDock.DefaultCS" %>

<%@ Register TagPrefix="sds" Namespace="Telerik.Web.SessionDS" %>
<%@ 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:RadScriptBlock runat="server" ID="RadScriptBlock1">
        <script type="text/javascript">
            Sys.Application.add_load(function () {
                demo.dock = $find("<%= RadDock1.ClientID %>");
            });
        </script>
        <script type="text/javascript" src="scripts.js"></script>
    </telerik:RadScriptBlock>
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="SubmitButton">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadScheduler1" />
                </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadScheduler1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadScheduler1" />
                        <telerik:AjaxUpdatedControl ControlID="PanelDock" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

    <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock1" Width="650px" Height="470px" Closed="true"
                Style="z-index: 2000;" Title="Edit appointment" OnClientCommand="OnClientCommand" OnClientDragStart="OnClientDragStart">
                <Commands>
                    <telerik:DockCloseCommand></telerik:DockCloseCommand>
                </Commands>
                <ContentTemplate>
                    <asp:Panel ID="PanelDock" runat="server">
                        <div class="editForm">
                            <div class="header">
                                <asp:Label runat="server" ID="StatusLabel"></asp:Label>
                            </div>
                            <div class="content">
                        <label>Description</label>
                        <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="DescriptionText" Width="240px"></telerik:RadTextBox>
                                <asp:RequiredFieldValidator runat="server" ID="DescriptionTextRequiredFieldValidator" ValidationGroup="Val"
                                    Display="Dynamic" ControlToValidate="DescriptionText" ErrorMessage="Description is required"></asp:RequiredFieldValidator>
                                <br />
                        <label>Starts at</label>
                                <telerik:RadDateTimePicker RenderMode="Lightweight" ID="StartTime" runat="server" SharedCalendarID="SharedCalendar"
                                    SharedTimeViewID="SharedTimeView" Width="220px">
                                </telerik:RadDateTimePicker>
                                <asp:RequiredFieldValidator runat="server" ID="StartTimeRequiredFieldValidator" Display="Dynamic" ValidationGroup="Val"
                                    ControlToValidate="StartTime" ErrorMessage="Start time is required"></asp:RequiredFieldValidator>
                                <br />
                        <label>Ends at</label>
                                <telerik:RadDateTimePicker RenderMode="Lightweight" ID="EndTime" runat="server" SharedCalendarID="SharedCalendar"
                                    SharedTimeViewID="SharedTimeView" Width="220px">
                                </telerik:RadDateTimePicker>
                                <asp:RequiredFieldValidator runat="server" ID="EndTimeRequiredFieldValidator" Display="Dynamic" ValidationGroup="Val"
                                    ControlToValidate="EndTime" ErrorMessage="End time is required"></asp:RequiredFieldValidator>
                                <br />
                        <label>Assigned to</label>
                                <telerik:RadComboBox RenderMode="Lightweight" runat="server" ID="UserDropDown" DataSourceID="UsersDataSource"
                                    DataTextField="UserName" DataValueField="ID">
                                </telerik:RadComboBox>
                                <br />
                        <label>Reminder</label>
                                <telerik:RadComboBox RenderMode="Lightweight" runat="server" ID="ReminderDropDown" Width="120px" Height="200px">
                                    <Items>
                                        <telerik:RadComboBoxItem Text="None" Value=""></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="0 minutes" Value="0"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="1 minute" Value="5"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="2 minutes" Value="10"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="3 minutes" Value="15"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="4 minutes" Value="30"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="1 hour" Value="60"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="2 hours" Value="120"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="3 hours" Value="180"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="4 hours" Value="240"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="5 hours" Value="300"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="6 hours" Value="360"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="7 hours" Value="420"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="8 hours" Value="480"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="9 hours" Value="540"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="10 hours" Value="600"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="11 hours" Value="660"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="12 hours" Value="720"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="18 hours" Value="1080"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="1 day" Value="1440"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="2 days" Value="2880"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="3 days" Value="4320"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="4 days" Value="5760"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="1 week" Value="10080"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="2 weeks" Value="20160"></telerik:RadComboBoxItem>
                                    </Items>
                                </telerik:RadComboBox>
                            </div>
                    <div >
                        <telerik:RadSchedulerRecurrenceEditor runat="server" ID="RadSchedulerRecurrenceEditor1">
                        </telerik:RadSchedulerRecurrenceEditor>
                    </div>
                            <div class="footer">
                                <telerik:RadButton RenderMode="Lightweight" runat="server" ID="SubmitButton" Text="Update" OnClientClicked="OnClientClicked" OnClick="SubmitButton_Click">
                                </telerik:RadButton>
                                  <telerik:RadButton RenderMode="Lightweight" runat="server" ID="RadButton1" Text="Cancel" OnClientClicked="hideForm" AutoPostBack="false">
                                </telerik:RadButton>
                            </div>
                            <telerik:RadTimeView ID="SharedTimeView" runat="server">
                            </telerik:RadTimeView>
                            <telerik:RadCalendar RenderMode="Lightweight" ID="SharedCalendar" runat="server" EnableMonthYearFastNavigation="False"
                                EnableMultiSelect="False" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False">
                            </telerik:RadCalendar>
                            <asp:HiddenField runat="server" ID="_originalRecurrenceRule"></asp:HiddenField>
                        </div>
                    </asp:Panel>
                </ContentTemplate>
            </telerik:RadDock>

        <div class="demo-container no-bg">
        <telerik:RadScheduler RenderMode="Lightweight" runat="server" ID="RadScheduler1" StartEditingInAdvancedForm="false"
            SelectedView="DayView" DataKeyField="ID" DataSubjectField="Subject" DataStartField="Start"
            DataEndField="End" DataReminderField="Reminder" DataRecurrenceField="RecurrenceRule"
            DataRecurrenceParentKeyField="RecurrenceParentID" DataSourceID="AppointmentsDataSource"
            OnFormCreating="RadScheduler1_FormCreating" Reminders-Enabled="true">
            <AdvancedForm Modal="true"></AdvancedForm>
            <ResourceTypes>
                <telerik:ResourceType KeyField="ID" Name="Room" TextField="RoomName" ForeignKeyField="RoomID"
                    DataSourceID="RoomsDataSource"></telerik:ResourceType>
                <telerik:ResourceType KeyField="ID" Name="User" TextField="UserName" ForeignKeyField="UserID"
                    DataSourceID="UsersDataSource"></telerik:ResourceType>
            </ResourceTypes>
            <TimeSlotContextMenuSettings EnableDefault="true"></TimeSlotContextMenuSettings>
            <AppointmentContextMenuSettings EnableDefault="true"></AppointmentContextMenuSettings>
        </telerik:RadScheduler>
    </div>
      <asp:HiddenField runat="server" ID="HiddenField1" />
    <asp:SqlDataSource ID="AppointmentsDataSource" runat="server" 
        ConnectionString="<%$ ConnectionStrings:TelerikConnectionString35 %>" SelectCommand="SELECT * FROM [Appointments]"
        InsertCommand="INSERT INTO [Appointments] ([Subject], [Start], [End], [UserID], [RoomID], [RecurrenceRule], [RecurrenceParentID], [Annotations], [Description], [Reminder], [LastModified]) VALUES (@Subject, @Start, @End, @UserID, @RoomID, @RecurrenceRule, @RecurrenceParentID, @Annotations, @Description, @Reminder, @LastModified)"
        UpdateCommand="UPDATE [Appointments] SET [Subject] = @Subject, [Start] = @Start, [End] = @End, [UserID] = @UserID, [RoomID] = @RoomID, [RecurrenceRule] = @RecurrenceRule, [RecurrenceParentID] = @RecurrenceParentID, [Annotations] = @Annotations, [Description] = @Description, [Reminder] = @Reminder, [LastModified] = @LastModified WHERE [ID] = @ID"
        DeleteCommand="DELETE FROM [Appointments] WHERE [ID] = @ID">
        <DeleteParameters>
            <asp:Parameter Name="ID" Type="Int32"></asp:Parameter>
        </DeleteParameters>
        <UpdateParameters>
            <asp:Parameter Name="Subject" Type="String"></asp:Parameter>
            <asp:Parameter Name="Start" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="End" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="UserID" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="RoomID" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="RecurrenceRule" Type="String"></asp:Parameter>
            <asp:Parameter Name="RecurrenceParentID" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="Annotations" Type="String"></asp:Parameter>
            <asp:Parameter Name="Description" Type="String"></asp:Parameter>
            <asp:Parameter Name="Reminder" Type="String"></asp:Parameter>
            <asp:Parameter Name="LastModified" Type="String"></asp:Parameter>
            <asp:Parameter Name="ID" Type="Int32"></asp:Parameter>
        </UpdateParameters>
        <InsertParameters>
            <asp:Parameter Name="Subject" Type="String"></asp:Parameter>
            <asp:Parameter Name="Start" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="End" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="UserID" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="RoomID" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="RecurrenceRule" Type="String"></asp:Parameter>
            <asp:Parameter Name="RecurrenceParentID" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="Annotations" Type="String"></asp:Parameter>
            <asp:Parameter Name="Description" Type="String"></asp:Parameter>
            <asp:Parameter Name="Reminder" Type="String"></asp:Parameter>
            <asp:Parameter Name="LastModified" Type="String"></asp:Parameter>
        </InsertParameters>
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="RoomsDataSource" runat="server" 
        ProviderName="System.Data.SqlClient" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString35 %>"
        SelectCommand="SELECT * FROM [Rooms]">
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="UsersDataSource" runat="server"
        ProviderName="System.Data.SqlClient" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString35 %>"
        SelectCommand="SELECT * FROM [Users]">
    </asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance