UI controls for ASP.NET AJAX, MVC, WPF,Silverlight, Windows 8 and Windows Phone
Cross-platform Mobile Development Toolwith cloud-based architecture
Everything you need to build sites andmobile apps with JavaScript and HTML5
One easy tool for Functional, Performance,Load and Mobile software testing
Everything for your online business - contentmanagement, ecommerce, emarketing
Simple and intuitive project managementand collaboration software
previous daynext daytoday
This example demonstrates how to customize the advanced template using the supplied user controls, which can be found in the folder of your local installation of Telerik.Web.UI suite ->Live Demos\Scheduler\Examples\AdvancedFormTemplate .
Double click on an appointment or a time slot to open the custom advanced form. You will notice that it resembles very much the default advanced form, but it also has a color picker that allows you to specify the appointment's BackColor property.
<%@ Page Language="C#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Scheduler.AdvancedFormTemplate.DefaultCS"CodeFile="DefaultCS.aspx.cs" %> <%@ Register TagPrefix="sds" Namespace="Telerik.Web.SessionDS" %> <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> <%@ Register TagPrefix="scheduler" TagName="AdvancedForm" Src="AdvancedFormCS.ascx" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns='http://www.w3.org/1999/xhtml'> <head> <title>Customize ASP.NET Scheduler's advanced form template | RadScheduler demo</title> <style type="text/css"> .RadScheduler .rsAptSubject { text-align: left; padding: 4px 0 1px; margin: 0 0 3px; font-size: 12px; font-weight: bold; color: #369; height: 17px; border-bottom: 1px solid #99DEFD; width: 100%; } .RadScheduler .rsAdvancedEdit .RadColorPicker label { text-align: left; display: block; padding: 0; } </style> </head> <body> <form id="form1" runat="server"> <telerik:RadScriptManager runat="server" ID="RadScriptManager1" /> <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" /> <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="RadScheduler1"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1" /> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> </telerik:RadAjaxManager> <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" /> <script type="text/javascript"> //<![CDATA[ // Dictionary containing the advanced template client object // for a given RadScheduler instance (the control ID is used as key). var schedulerTemplates = {}; function schedulerFormCreated(scheduler, eventArgs) { // Create a client-side object only for the advanced templates var mode = eventArgs.get_mode(); if (mode == Telerik.Web.UI.SchedulerFormMode.AdvancedInsert || mode == Telerik.Web.UI.SchedulerFormMode.AdvancedEdit) { // Initialize the client-side object for the advanced form var formElement = eventArgs.get_formElement(); var templateKey = scheduler.get_id() + "_" + mode; var advancedTemplate = schedulerTemplates[templateKey]; if (!advancedTemplate) { // Initialize the template for this RadScheduler instance // and cache it in the schedulerTemplates dictionary var schedulerElement = scheduler.get_element(); var isModal = scheduler.get_advancedFormSettings().modal; advancedTemplate = new window.SchedulerAdvancedTemplate(schedulerElement, formElement, isModal); advancedTemplate.initialize(); schedulerTemplates[templateKey] = advancedTemplate; // Remove the template object from the dictionary on dispose. scheduler.add_disposing(function () { schedulerTemplates[templateKey] = null; }); } // Are we using Web Service data binding? if (!scheduler.get_webServiceSettings().get_isEmpty()) { // Populate the form with the appointment data var apt = eventArgs.get_appointment(); var isInsert = mode == Telerik.Web.UI.SchedulerFormMode.AdvancedInsert; advancedTemplate.populate(apt, isInsert); } } } //]]> </script> <div class="exampleContainer"> <telerik:RadScheduler runat="server" ID="RadScheduler1" Width="750px" SelectedDate="2012-04-16" TimeZoneOffset="03:00:00" OnDataBound="RadScheduler1_DataBound" AppointmentStyleMode="Default" OnAppointmentCreated="RadScheduler1_AppointmentCreated" OnAppointmentDataBound="RadScheduler1_AppointmentDataBound" OnClientFormCreated="schedulerFormCreated" CustomAttributeNames="AppointmentColor" EnableDescriptionField="true"> <AdvancedForm Modal="true" EnableTimeZonesEditing="true" /> <Reminders Enabled="true" /> <AppointmentTemplate> <div class="rsAptSubject"> <%# Eval("Subject") %> </div> <%# Eval("Description") %> </AppointmentTemplate> <AdvancedEditTemplate> <scheduler:AdvancedForm runat="server" ID="AdvancedEditForm1" Mode="Edit" Subject='<%# Bind("Subject") %>' Description='<%# Bind("Description") %>' Start='<%# Bind("Start") %>' End='<%# Bind("End") %>' RecurrenceRuleText='<%# Bind("RecurrenceRule") %>' Reminder='<%# Bind("Reminder") %>' AppointmentColor='<%# Bind("AppointmentColor") %>' UserID='<%# Bind("User") %>' RoomID='<%# Bind("Room") %>' TimeZoneID='<%# Bind("TimeZoneID") %>' /> </AdvancedEditTemplate> <AdvancedInsertTemplate> <scheduler:AdvancedForm runat="server" ID="AdvancedInsertForm1" Mode="Insert" Subject='<%# Bind("Subject") %>' Start='<%# Bind("Start") %>' End='<%# Bind("End") %>' Description='<%# Bind("Description") %>' RecurrenceRuleText='<%# Bind("RecurrenceRule") %>' Reminder='<%# Bind("Reminder") %>' AppointmentColor='<%# Bind("AppointmentColor") %>' UserID='<%# Bind("User") %>' RoomID='<%# Bind("Room") %>' TimeZoneID='<%# Bind("TimeZoneID") %>' /> </AdvancedInsertTemplate> <TimelineView UserSelectable="false" /> <TimeSlotContextMenuSettings EnableDefault="true" /> <AppointmentContextMenuSettings EnableDefault="true" /> </telerik:RadScheduler> </div> </form> </body> </html>