Log In
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]ASP.NET WebForms Controls
 [Collapse]ASP.NET MVC Extensions
  [Expand]Product Information
  [Expand]Getting Started
  [Expand]Common Concepts
  [Expand]Grid View
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Rich Text Editor
  [Expand]HTML Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Navigation and Layout Extensions
  [Expand]File Management
  [Expand]Multi-Use Site Extensions
  [Expand]Pivot Grid
   [Expand]Overview - SchedulerControl
    Main Features - Scheduler
   [Collapse]Getting Started - Scheduler
     Lesson 1 - Use Scheduler to Display Appointments in Read-Only Mode
     Lesson 2 - Implement the Insert/Update/Delete Appointment Functionality
     Lesson 3 - Use Scheduler in Complex Views
     Use a Project Template to Create a Fully Functional Application
     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]Concepts - Scheduler
   [Expand]Visual Elements - Scheduler
  [Expand]Tree List
  [Expand]Data Editor Extensions
  [Expand]Report 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]Document Server
[Expand]Report 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=T582020

To use this tutorial, start with a sample project in which the Scheduler extension is bound to a collection of custom objects: How to bind MVC Scheduler to a collection of custom objects (List).

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 at runtime using the following code:

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:

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