How to: Customize Popup Menu

• Feb 16, 2023
• 4 minutes to read

Example 1

The code sample below demonstrates how to customize a popup menu item and change the default action assigned to a menu item.

JS

function DefaultViewMenuHandler(scheduler, s, args) {
    if (args.item.GetItemCount() <= 0) {
        if (args.item.name == "GotoToday") {
            if (window.confirm("Are you realy want to leave this day?")) {
                scheduler.RaiseCallback("GOTODAY|" + args.item.name);
            }
        }
        else
            scheduler.RaiseCallback("MNUVIEW|" + args.item.name);
    }
}

CS

using DevExpress.Web;
using DevExpress.Web.ASPxScheduler;
using DevExpress.XtraScheduler;
    protected void ASPxScheduler1_PopupMenuShowing(object sender, PopupMenuShowingEventArgs e) {
        ASPxSchedulerPopupMenu menu = e.Menu;
        if (menu.MenuId.Equals(SchedulerMenuItemId.DefaultMenu)) {
            menu.ClientSideEvents.ItemClick = String.Format("function(s, e) {{ DefaultViewMenuHandler({0}, s, e); }}", ASPxScheduler1.ClientInstanceName);
            MenuItemCollection menuItems = menu.Items;
            MenuItem defaultItem = menuItems.FindByName("NewAppointment");
            defaultItem.Name = "MyNewAppointment";
            defaultItem.Text = "Instant Appointment";
        }
    }

VB

Imports DevExpress.Web
Imports DevExpress.Web.ASPxScheduler
Imports DevExpress.XtraScheduler
    Protected Sub ASPxScheduler1_PopupMenuShowing(ByVal sender As Object, ByVal e As PopupMenuShowingEventArgs)
        Dim menu As ASPxSchedulerPopupMenu = e.Menu
        If menu.MenuId.Equals(SchedulerMenuItemId.DefaultMenu) Then
            menu.ClientSideEvents.ItemClick = String.Format("function(s, e) {{ DefaultViewMenuHandler({0}, s, e); }}", ASPxScheduler1.ClientInstanceName)
            Dim menuItems As MenuItemCollection = menu.Items
            Dim defaultItem As MenuItem = menuItems.FindByName("NewAppointment")
            defaultItem.Name = "MyNewAppointment"
            defaultItem.Text = "Instant Appointment"
        End If
    End Sub

To implement a new custom callback command, create a new class named CustomMenuViewCallbackCommand, which inherits from the DevExpress.Web.ASPxScheduler.Internal.MenuViewCallbackCommand class. The required functionality is implemented by overriding the ParseParameters and the ExecuteCore methods of the base class.

The code snippet below creates a new appointment in the selected interval with the “Busy” label (the Appointment.LabelKey property is set to 1) and “Free” status (the Appointment.StatusKey is set to the AppointmentStatusType.Busy value). This action is performed for menu items with the MenuItem.Name equal to “MyNewAppointment”. Use the ASPxScheduler.PopupMenuShowing event to set a menu item name.

To execute a custom callback command when the user clicks an item in the popup menu, handle the ASPxScheduler.BeforeExecuteCallbackCommand event and specify a custom callback command for the “MNUVIEW” value of the SchedulerCallbackCommandEventArgs.CommandId arguments property.

DefaultItemWithCustomAction.aspx.cs

using DevExpress.Web;
using DevExpress.Web.ASPxScheduler;
using DevExpress.XtraScheduler;
    protected void ASPxScheduler1_BeforeExecuteCallbackCommand(object sender, SchedulerCallbackCommandEventArgs e) {
        if(e.CommandId == "MNUVIEW")
            e.Command = new CustomMenuViewCallbackCommand(ASPxScheduler1);
    }
public class CustomMenuViewCallbackCommand : DevExpress.Web.ASPxScheduler.Internal.MenuViewCallbackCommand {
    string menuItemName;

    public CustomMenuViewCallbackCommand(ASPxScheduler control)
        : base(control) {
    }

    public string MenuItemName { get { return menuItemName; } }

    protected override void ParseParameters(string parameters) {
        this.menuItemName = parameters;
        base.ParseParameters(parameters);
    }
    protected override void ExecuteCore() {
        ExecuteUserMenuCommand(MenuItemName);
        base.ExecuteCore();
    }
    protected internal virtual void ExecuteUserMenuCommand(string MenuItemName) {
        if(MenuItemName == "MyNewAppointment")
            CreateAppointment("New Appointment", AppointmentStatusType.Free, 1);
    }
    protected void CreateAppointment(string subject, AppointmentStatusType statusType, int labelId) {
        Appointment apt = Control.Storage.CreateAppointment(AppointmentType.Normal);
        apt.Subject = subject;
        apt.Start = Control.SelectedInterval.Start;
        apt.End = Control.SelectedInterval.End;
        apt.ResourceId = Control.SelectedResource.Id;
        apt.StatusKey = (int)statusType;
        apt.LabelKey = labelId;
        Control.Storage.Appointments.Add(apt);
    }
}

DefaultObjectDataSources.ascx (C#)

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="DefaultObjectDataSources.ascx.cs" Inherits="DefaultObjectDataSources" %>
<asp:ObjectDataSource ID="appointmentDataSourceObject" runat="server" DataObjectTypeName="CustomEvent" TypeName="CustomEventDataSource" DeleteMethod="DeleteMethodHandler" SelectMethod="SelectMethodHandler" InsertMethod="InsertMethodHandler" OnObjectCreated="temporaryAppointmentDataSource_ObjectCreated" UpdateMethod="UpdateMethodHandler">
</asp:ObjectDataSource>
<asp:ObjectDataSource ID="resourceDataSourceObject" runat="server" DataObjectTypeName="CustomResource" TypeName="CustomResourceDataSource" DeleteMethod="DeleteMethodHandler" SelectMethod="SelectMethodHandler" InsertMethod="InsertMethodHandler" OnObjectCreated="temporaryResourceDataSource_ObjectCreated" UpdateMethod="UpdateMethodHandler">
</asp:ObjectDataSource>

DefaultItemWithCustomAction.aspx.vb

Imports DevExpress.Web
Imports DevExpress.Web.ASPxScheduler
Imports DevExpress.XtraScheduler
    Protected Sub ASPxScheduler1_BeforeExecuteCallbackCommand(ByVal sender As Object, ByVal e As SchedulerCallbackCommandEventArgs)
        If e.CommandId = "MNUVIEW" Then
            e.Command = New CustomMenuViewCallbackCommand(ASPxScheduler1)
        End If
    End Sub
Public Class CustomMenuViewCallbackCommand
    Inherits DevExpress.Web.ASPxScheduler.Internal.MenuViewCallbackCommand


    Private menuItemName_Renamed As String

    Public Sub New(ByVal control As ASPxScheduler)
        MyBase.New(control)
    End Sub

    Public ReadOnly Property MenuItemName() As String
        Get
            Return menuItemName_Renamed
        End Get
    End Property

    Protected Overrides Sub ParseParameters(ByVal parameters As String)
        Me.menuItemName_Renamed = parameters
        MyBase.ParseParameters(parameters)
    End Sub
    Protected Overrides Sub ExecuteCore()
        ExecuteUserMenuCommand(MenuItemName)
        MyBase.ExecuteCore()
    End Sub
    Protected Friend Overridable Sub ExecuteUserMenuCommand(ByVal MenuItemName As String)
        If MenuItemName = "MyNewAppointment" Then
            CreateAppointment("New Appointment", AppointmentStatusType.Free, 1)
        End If
    End Sub
    Protected Sub CreateAppointment(ByVal subject As String, ByVal statusType As AppointmentStatusType, ByVal labelId As Integer)
        Dim apt As Appointment = Control.Storage.CreateAppointment(AppointmentType.Normal)
        apt.Subject = subject
        apt.Start = Control.SelectedInterval.Start
        apt.End = Control.SelectedInterval.End
        apt.ResourceId = Control.SelectedResource.Id
        apt.StatusKey = CInt((statusType))
        apt.LabelKey = labelId
        Control.Storage.Appointments.Add(apt)
    End Sub
End Class

DefaultObjectDataSources.ascx (VB.NET)

<%@ Control Language="vb" AutoEventWireup="true" CodeFile="DefaultObjectDataSources.ascx.vb" Inherits="DefaultObjectDataSources" %>
<asp:ObjectDataSource ID="appointmentDataSourceObject" runat="server" DataObjectTypeName="CustomEvent" TypeName="CustomEventDataSource" DeleteMethod="DeleteMethodHandler" SelectMethod="SelectMethodHandler" InsertMethod="InsertMethodHandler" OnObjectCreated="temporaryAppointmentDataSource_ObjectCreated" UpdateMethod="UpdateMethodHandler">
</asp:ObjectDataSource>
<asp:ObjectDataSource ID="resourceDataSourceObject" runat="server" DataObjectTypeName="CustomResource" TypeName="CustomResourceDataSource" DeleteMethod="DeleteMethodHandler" SelectMethod="SelectMethodHandler" InsertMethod="InsertMethodHandler" OnObjectCreated="temporaryResourceDataSource_ObjectCreated" UpdateMethod="UpdateMethodHandler">
</asp:ObjectDataSource>