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

External Edit in RadDock

  • today
April 2012
April 2012
SMTWTFS
       
1234567
891011121314
15161718192021
22232425262728
2930     
Monday, April 16, 2012
  • Day
  • Week
  • Month
  • Timeline
all day
8AM
9AM
10AM
11AM
12PM
1PM
2PM
3PM
4PM
5PM
Tecar
terry
Test resize
test
test resize
this is an APPT.
call bob
gfhdghdfgh
dasda
ddddddddddddddddddd
zzzzzzzz
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.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
  • Styles.css
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Scheduler.Examples.RadDock.DefaultVB" %>

<%@ 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 style="margin-left: 20px;">
                        <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"
            SelectedDate="2012-04-16" DayStartTime="08:00:00" DayEndTime="18:00:00" 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