[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
   Getting Started
  [Expand]Grid View
  [Expand]Tree List
  [Expand]Card View
  [Expand]Chart Control
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
   [Expand]Product Information
    Getting Started
   [Expand]Visual Elements
   [Expand]Design-Time Features
    [Expand]Data Binding
     [Collapse]Custom Forms and Custom Fields
       How to: Customize Appointment Appearance via Templates
       How to: Customize a Form Using Templates
       How to: Customize the Appointment Editing Form for Working with Custom Fields
       How to: Customize the Appointment Dialog using View Model API (simple customization)
       How to: Customize the Appointment Dialog using View Model API (working with custom fields)
    [Expand]Printing and Reporting
   [Expand]End-User Capabilities
   [Expand]Member Tables
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Controls
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

How to: Customize the Appointment Dialog using View Model API (working with custom fields)


The information in this topic applies to DevExpress ASP.NET Scheduler version 17.2 and later.

As a follow-up to How to: Customize the Appointment Dialog using View Model API (simple customization), this topic provides a step-by-step tutorial about advanced Appointment Dialog customization (working with custom fields).

In this tutorial, cascading combo boxes are used to edit the two hierarchical custom fields. The first combo box (with the "meeting", "travel", "phone call" values) replaces the "Subject" text box. When an end-user selects the "phone call" item from the editor's dropdown, the "Company" and "Contact" combo boxes appear in the dialog.

Online Example

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

To use this tutorial, start with a sample project in which the ASPxScheduler control is bound to a collection of custom objects: How to: Bind ASPxScheduler Appointment to ObjectDataSource.

Then, follow the steps below:

Expanded Step 1 - Update Data Source

Add two integer properties (“CompanyID” and “ContactID”) to the CustomAppointment class:

Expanded Step 2 - Specify Custom Field Mappings

Add custom field mappings to the previously created fields using the Visual Studio Designer, markup or property grid (ASPxScheduler control ->Storage->Appointments->CustomFieldMappings).

If required, you can add mappings at runtime instead. In this case, use the following code in the code-behind file for the page that contains the ASPxScheduler control (Default.aspx.cs or Default.aspx.vb if you use Visual Basic):

Expanded Step 3 - Create a custom AppointmentEditDialogViewModel descendant

The AppointmentEditDialogViewModel descendant allows changing predefined editors, remove unnecessary editors and add new editors (fields) using the Load method overload.

Replace the “Subject” text box with a combo box by calling the Load method overload. In the following code, use the SetEditorTypeFor method to specify the type of the editor used for editing a specific field, and the SetDataItemsFor method to generate items for the editors intended to work with collections.

Add two combo boxes to edit the “Company” and “Contact” custom fields. For this, declare two corresponding properties in the CustomAppointmentEditDialogViewModel object. Note that the properties names should be the same as in the “custom field” mappings to save and load the custom field values correctly. In the code, the DialogFieldViewSettings parameters allow specifying the editor type used for editing a property value, as well as the editor caption.

Generate items for the cascading combo boxes using the SetDataItemsFor method within the AppointmentEditDialogViewModel.Load method.

Implement "Contact" combo box filtering items based on a selected “Company” combo box value.

Then, use the TrackPropertyChangeFor method to regenerate the “Contact” combo box items after changing the “Company” editor's value. This method allows you to track property value changes on the server-side using a corresponding callback request. The form editors are reloaded after executing the callback request.

Invoke the TrackPropertyChangeFor method for the “Subject” field with an empty action to reload the dialog content. It allows changing the “Company” and “Contact” combo boxes' visibility depending on the “Subject” editor value.

The AppointmentEditDialogViewModel object allows changing the dialog editors' visibility and availability based on custom conditions.

Use the SetDialogElementStateConditions overload method to customize the editors' visibility on the form as follows:

  • Hiding the "Location", "All-Day" and "Reminder" editors on the edit form.
  • Showing "Company" and "Contact" editors only when an end-user selects the "phone call" item in the “Subject” editor's dropdown.
  • Showing the "Contact” editor only when an end-user selects an item in the “Company” combo box.

The custom AppointmentEditDialogViewModel descendant's complete code for the described scenario is illustrated below:

Expanded Step 4 - Replace the predefined View Model with a custom one

To replace the predefined View Model with a custom one, use the following code (for example, within the Page.Init event handler):

Expanded Step 5 - Generate a default dialog layout and add custom editors into the dialog

The AppointmentDialog.GenerateDefaultLayoutElements method generates the default dialog layout and can also be used to reorder custom editors on the dialog form.

To locate the editors below the “Description” field on the form, do the following:

Expanded See Also

Is this topic helpful?​​​​​​​