Pop-Up Menus
- 5 minutes to read
The SchedulerControl is provided with four context menu types that enable an end-user to manage appointments, switch views and dates and adjust time ruler settings. You can customize any type of a context menu by adding or removing items, or replace the default menu with a custom one.
The built-in context menu items are contained in the static DefaultBarItemNames class. The table below lists all available menu types, API used to customize it and the DefaultBarItemNames properties used to access the menu items.
Menu Type | Description | Image | Commands and Menu API | DefaultBarItemNames properties |
---|---|---|---|---|
Cell Pop-Up Menu | Appears when right-clicking an empty time cell. | SchedulerCommands.ShowNewAppointmentWindowCommand SchedulerCommands.ShowNewAllDayAppointmentWindowCommand SchedulerCommands.ShowNewRecurringAppointmentWindowCommand SchedulerCommands.ShowNewRecurringAllDayAppointmentWindowCommand SchedulerCommands.GoToTodayCommand SchedulerCommands.GoToDateCommand SchedulerCommands.SwitchViewCommand | ContextMenu_Items_Cell_Actions_NewAppointment ContextMenu_Items_Cell_Actions_NewAllDayEvent ContextMenu_Items_Cell_Actions_NewRecurringAppointment ContextMenu_Items_Cell_Actions_NewRecurringEvent ContextMenu_Items_Cell_Actions_GotoToday ContextMenu_Items_Cell_Actions_GotoDate ContextMenu_Items_Cell_Actions_TimeScales ContextMenu_Items_Cell_Actions_TimeScaleCaptions ContextMenu_Items_Cell_Actions_SwitchView | |
Appointment Pop-Up Menu | Appears when right-clicking an appointment. | SchedulerCommands.ShowAppointmentWindowCommand SchedulerCommands.ShowEditRecurrencePatternWindowCommand SchedulerCommands.RestoreOccurrenceCommand SchedulerCommands.ChangeStatusCommand SchedulerCommands.ChangeLabelCommand SchedulerCommands.DeleteAppointmentCommand | ContextMenu_Items_Appointment_Actions_Open ContextMenu_Items_Appointment_Actions_EditSeries ContextMenu_Items_Appointment_Actions_RestoreOccurrence ContextMenu_Items_Appointment_Options_ShowTimeAs ContextMenu_Items_Appointment_Options_LabelAs ContextMenu_Items_Appointment_Actions_Delete | |
Appointment Drag Pop-Up Menu | Appears when dragging an appointment with the right mouse button. | SchedulerCommands.MoveAppointmentsOnDropCommand SchedulerCommands.CopyAppointmentsOnDropCommand SchedulerCommands.CancelDropAppointmentsCommand | ContextMenu_Items_AppointmentDrop_Actions_MoveAppointmentsOnDrop ContextMenu_Items_AppointmentDrop_Actions_CopyAppointmentsOnDrop ContextMenu_Items_AppointmentDrop_Actions_CancelDropAppointments | |
Time Ruler Pop-Up Menu | Appears when right-clicking a time ruler. | SchedulerCommands.ShowNewAppointmentWindowCommand SchedulerCommands.ShowNewAllDayAppointmentWindowCommand SchedulerCommands.ShowNewRecurringAppointmentWindowCommand SchedulerCommands.ShowNewRecurringAllDayAppointmentWindowCommand SchedulerCommands.CustomizeTimeRulerCommand SchedulerCommands.ChangeTimeScaleCommand | ContextMenu_Items_TimeRuler_Actions_NewAppointment ContextMenu_Items_TimeRuler_Actions_NewAllDayEvent ContextMenu_Items_TimeRuler_Actions_NewRecurringAppointment ContextMenu_Items_TimeRuler_Actions_NewRecurringEvent ContextMenu_Items_TimeRuler_Actions_CustomizeTimeRuler ContextMenu_Items_TimeRuler_Actions_SwitchView ContextMenu_Items_TimeRuler_Actions_SwitchTimeScale |
Customize Context Menus Dynamically
Handle the SchedulerControl.PopupMenuShowing event to customize popup menus at runtime. Use the Menu property to obtain the current pop-up menu. The MenuType property provides information about the current menu type (appointment, time cell, time ruler or appointment drop). See the example below.
Note
A complete sample project is available at https://github.com/DevExpress-Examples/how-to-handle-the-popupmenushowing-event-to-customize-the-scheduler-context-menu-t575003.
private void scheduler_PopupMenuShowing(object sender, PopupMenuShowingEventArgs e)
{
//Customize the cell context menu:
if (e.MenuType == ContextMenuType.CellContextMenu)
{
PopupMenu menu = (PopupMenu)e.Menu;
//Change the "New All Day Event" item's caption to "Create All-Day Appointment":
for (int i = 0; i < menu.Items.Count; i++)
{
BarItem menuItem = menu.Items[i] as BarItem;
if (menuItem != null)
{
if (menuItem != null && menuItem.Content.ToString() == "New All Day Event")
{
menuItem.Content = "Create All-Day Appointment";
break;
}
}
}
//Add new menu item:
if (!menu.Items.Contains(myMenuItem))
{
CreateNewItem();
menu.Items.Add(myMenuItem);
}
}
}
private void CreateNewItem()
{
//Create a new menu item:
myMenuItem = new BarButtonItem();
myMenuItem.Name = "customItem";
myMenuItem.Content = "Item Added at Runtime";
myMenuItem.ItemClick += new ItemClickEventHandler(customItem_ItemClick);
}
private void customItem_ItemClick(object sender, ItemClickEventArgs e)
{
// Implement a custom action.
MessageBox.Show(String.Format("{0} is clicked", e.Item.Name));
}
Specify Customization Actions
Tip
Use the scheduler’s smart tag to generate a default context menu for appointments, time rulers or time cells in design-time, and customize it as required. Refer to the Create Context Menu topic for details.
Add a New Item
The OptionsContextMenu class provides options that allow you to customize context menus. Use the *ContextMenuActions property to access the target context menu’s actions collection. Add an InsertAction to the retrieved collection to add a new item to the context menu. The following code sample inserts two new items to the appointment context menu.
Note
A complete sample project is available at https://github.com/DevExpress-Examples/how-to-customize-the-scheduler-context-menus-t574078.
<dxsch:OptionsContextMenu.AppointmentContextMenuActions> <!--Insert the "Recurrence" item invoking the Recurrence dialog--> <dxb:InsertAction Index="-1"> <dxb:BarButtonItem Content="Recurrence" Glyph="{dx:DXImage Image=Recurrence_32x32.png}" Command="{Binding ElementName=schedulerCommands, Path=OpenRecurrenceWindowCommand}"> </dxb:BarButtonItem> </dxb:InsertAction> <!--Insert the check item which converts the selected appointment to an all day event--> <dxb:InsertAction> <dxb:BarCheckItem x:Name="allDayCheck" Content="All-Day Appointment" Glyph="{dx:DXImage Image=Check_16x16.png}" CheckedChanged="allDayCheck_CheckedChanged"/> </dxb:InsertAction> </dxsch:OptionsContextMenu.AppointmentContextMenuActions>
As a result, the menu appears as follows.
Update an Existing Item
Obtain the context menu’s action collection and add an UpdateAction to it to update any existing context menu item, as shown in the code sample below.
Note
A complete sample project is available at https://github.com/DevExpress-Examples/how-to-customize-the-scheduler-context-menus-t574078.
<dxsch:OptionsContextMenu.TimeRulerContextMenuActions> <!--Hide the "New All Day Event" and "New Recurring Event" items--> <dxb:UpdateAction ElementName="{x:Static Member=dxsch:DefaultBarItemNames.ContextMenu_Items_TimeRuler_Actions_NewAllDayEvent}" PropertyName="IsVisible" Value="False"/> <dxb:UpdateAction ElementName="{x:Static Member=dxsch:DefaultBarItemNames.ContextMenu_Items_TimeRuler_Actions_NewRecurringEvent}" PropertyName="IsVisible" Value="False"/> <!--Disable the "New Appointment" and "New Recurring Appointment" item--> <dxb:UpdateAction ElementName="{x:Static Member=dxsch:DefaultBarItemNames.ContextMenu_Items_TimeRuler_Actions_NewAppointment}" PropertyName="IsEnabled" Value="False"/> <dxb:UpdateAction ElementName="{x:Static Member=dxsch:DefaultBarItemNames.ContextMenu_Items_TimeRuler_Actions_NewRecurringAppointment}" PropertyName="IsEnabled" Value="False"/> </dxsch:OptionsContextMenu.TimeRulerContextMenuActions>
The image shows the code execution result.
Remove the Item
Add a RemoveAction to the menu’s action collection to delete any item from the target context menu. The code snippet shows how to delete an item from the appointment drop context menu.
Note
A complete sample project is available at https://github.com/DevExpress-Examples/how-to-customize-the-scheduler-context-menus-t574078.
<dxsch:OptionsContextMenu.AppointmentDropContextMenuActions> <!--Remove the "Copy" item--> <dxb:RemoveAction ElementName="{x:Static Member=dxsch:DefaultBarItemNames.ContextMenu_Items_AppointmentDrop_Actions_CopyAppointmentsOnDrop}"/> </dxsch:OptionsContextMenu.AppointmentDropContextMenuActions>
The resulting context menu is shown on the image below.
Create a Custom Context Menu
The OptionsContextMenu.*ContextMenu properties allow you to provide a custom context menu instead of the default one. The code sample below shows how to provide a custom cell pop-up menu shown in the image.
Note
A complete sample project is available at https://github.com/DevExpress-Examples/how-to-customize-the-scheduler-context-menus-t574078.
<dxsch:OptionsContextMenu.CellContextMenu>
<dxb:PopupMenu>
<dxb:PopupMenu.Items>
<dxb:BarButtonItem Content="Add Broadcast..."
Glyph="{dx:DXImage Image=Appointment_16x16.png}"
Command="{Binding ElementName=schedulerCommands, Path=ShowNewAppointmentWindowCommand}"/>
<dxb:BarButtonItem Content="Add News Block..."
Glyph="{dx:DXImage Image=RecurringAppointment_16x16.png}"
Command="{Binding ElementName=schedulerCommands, Path=ShowNewRecurringAppointmentWindowCommand}"/>
</dxb:PopupMenu.Items>
</dxb:PopupMenu>
</dxsch:OptionsContextMenu.CellContextMenu>