Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
  [Expand]Reporting
  [Expand]Chart Control
  [Expand]Grid View
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Site Navigation and Layout
  [Expand]File Management
  [Expand]Multi-Use Site Controls
  [Collapse]Scheduler
   [Expand]Product Information
    Getting Started
   [Expand]Fundamentals
   [Expand]Concepts
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Collapse]Examples
    [Expand]Data Binding
    [Expand]Selection
    [Collapse]Customization
     [Expand]Appearance
     [Expand]Behavior
     [Collapse]Custom Forms and Custom Fields
       How to: Customize Appointment Appearance via Templates
       How to: Customize a Form Using Templates
       How to: Modify the Appointment Editing Form for Working with Custom Fields
    [Expand]Printing and Reporting
    [Expand]Miscellaneous
   [Expand]End-User Capabilities
   [Expand]Member Tables
  [Expand]HTML Editor
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gauges
  [Expand]Data Editors
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

How to: Customize a Form Using Templates

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:

Expanded 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.
  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.
  13. Modify the overall appearance of the page and its layout.

Expanded 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.
Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E1074.

Expanded See Also

How would you rate this topic?​​​​​​​