How to: Customize a Form Using Templates

• Oct 06, 2023
• 4 minutes to read

This topic provides guidelines on replacing the forms used by the ASPxScheduler to edit appointments or navigate to another date, with custom ones.

Default templates are located in the ~/DevExpress/ASPxSchedulerForms/ folder of the web site or project. If this folder is missing, you can create it and copy default templates to your project site using the ASPxScheduler control’s Smart Tag, as shown in the Dialog Forms article. Perform the following steps:

AppointmentForm, InplaceEditorForm

1. Save a copy of the file, containing default form, with a different name in another location. For example, create a new folder “MyForms” and copy the AppointmentForm.ascx and the corresponding code-behind file AppointmentForm.ascx.cs (or AppointmentForm.ascx.vb, if you use Visual Basic) to that folder.
2. Rename the files to “MyAppoinmentForm” - MyAppointmentForm.ascx and MyAppointmentForm.ascx.cs (or MyAppointmentForm.ascx.vb, if you use Visual Basic).
3. In the MyAppointmentForm.ascx page change the Codebehind property value of the “@ Control” directive to the new name of the code-behind file - Codebehind=”MyAppointmentForm.ascx.cs”
4. Rename a custom template class to avoid errors during compilation. To accomplish this, rename the class AppointmentForm in the MyAppointmentForm.ascx code-behind file and in the designer class file to MyAppointmentForm. This step is required if your project is a web application.
5. Specify the file location as the ASPxSchedulerOptionsForms.AppointmentFormTemplateUrl property of the ASPxScheduler control. E.g. in this instance it should be “~\MyForms\MyAppointmentForm.ascx”.
6. If you need the custom appointment fields to be displayed and processed, you should execute steps 7-12; otherwise, go to step 13.
7. Create a class, derived from the AppointmentFormTemplateContainer, containing custom properties. This class definition can be located within a class file in the App_Code folder.
8. Replace AppointmentFormTemplateContainer references in the template page with the name of the class you’ve created in step 7.

9. Handle the ASPxScheduler.AppointmentFormShowing event to create an instance of the template container class, defined in step 7, and specify it as the destination container instead of the default one.

   C#

   protected void ASPxScheduler1_AppointmentFormShowing(object sender, 
   AppointmentFormEventArgs e) {
       e.Container = new MyAppointmentFormTemplateContainer((ASPxScheduler)sender);
   }
   

   VB.NET

   Protected Sub ASPxScheduler1_AppointmentFormShowing(ByVal sender As Object,  _
       ByVal e As AppointmentFormEventArgs)
   
       e.Container = New MyAppointmentFormTemplateContainer(CType(sender, ASPxScheduler))
   End Sub 
   

10. Define a class, which inherits from the DevExpress.Web.ASPxScheduler.Internal.AppointmentFormController. This class provides data exchange between the form and the appointment, and defines the ApplyCustomFieldsValues() method which overrides the corresponding method of the base class.
11. Define a class, which inherits from the DevExpress.Web.ASPxScheduler.Internal.AppointmentFormSaveCallbackCommand. This class creates an instance of the AppointmentFormController inheritor (defined in step 10) via the CreateAppointmentFormController method and overrides the AssignControllerValues method of the base class to collect user data from the form’s editors.

12. Handle the ASPxScheduler.BeforeExecuteCallbackCommand event. The event handler code should create an instance of the class defined in step 11, and specify it as the destination command instead of the default one.

    C#

    protected void ASPxScheduler1_BeforeExecuteCallbackCommand(object sender, 
    SchedulerCallbackCommandEventArgs e) {
        if(e.CommandId == SchedulerCallbackCommandId.AppointmentSave) {
            e.Command = new MyAppointmentSaveCallbackCommand((ASPxScheduler)sender);
        }
    } 
    

    VB.NET

    Protected Sub ASPxScheduler1_BeforeExecuteCallbackCommand(ByVal sender As Object,  _
        ByVal e As SchedulerCallbackCommandEventArgs)
    
        If e.CommandId = SchedulerCallbackCommandId.AppointmentSave Then
            e.Command = New MyAppointmentSaveCallbackCommand(CType(sender, ASPxScheduler))
        End If
    End Sub 
    

13. Modify the overall appearance of the page and its layout.

GotoDateForm

GotoDateForm

1. Save a copy of this file with a different name in another location. For example, create a new folder “MyForms” and copy the GotoDateForm.ascx and the corresponding code-behind file GotoDateForm.ascx.cs (or GotoDate.ascx.vb, if you use Visual Basic) to that folder.
2. Rename the files to “MyGotoDateForm” - MyGotoDateForm.ascx and MyGotoDateForm.ascx.cs (or MyGotoDate.ascx.vb, if you use Visual Basic).
3. In the MyGotoDateForm.ascx page change the Codebehind property value of the “@ Control” directive to the new name of the code-behind file - Codebehind=”MyGotoDateForm.ascx.cs”
4. Rename a custom template class to avoid errors during compilation. To accomplish this, rename the classGotoDateForm in the MyGotoDateForm.ascx code-behind file and in the designer class file to MyGotoDateForm. This step is required if your project is a web application.
5. Specify the file location as the ASPxSchedulerOptionsForms.GotoDateFormTemplateUrl property of the ASPxScheduler control.
6. If you need to display and process the custom appointment properties, you should execute steps 7-9; otherwise, go to step 10.
7. Create a class, derived from the GotoDateFormTemplateContainer, containing custom properties. This class definition can be located within a class file in the App_Code folder.
8. Replace GotoDateFormTemplateContainer references in the template page with the name of the class you’ve created in step 7.
9. Handle the ASPxScheduler.AppointmentFormShowing event to create an instance of the template container class, defined in step 8, and specify it as the destination container instead of the default one.
10. Modify the overall appearance of the page and its layout.