Context menu

Event context menu

Right-clicking an event can open a context menu.

• There can be a single menu for all events.
• You can set a custom menu for individual events.
• Menu items can run custom JavaScript, navigate to a specified URL, or call server-side event of DayPilotCalendar control using PostBack or CallBack.

Adding context menu

Context menu is a separate control (DayPilotMenu).

1. Add DayPilotMenu control to a page with DayPilotCalendar.
2. Create the menu items.
3. Set DayPilotCalendar.ContextMenuID to the ID of the DayPilotMenu control (it can be easily done using a drop-down menu in the Visual Studio designer).
4. Make sure that DayPilotCalendar.EventRightClickHandling is set to ContextMenu (default value).

If you want to set a different context menu for certain events, you need to use BeforeEventRender event handler:

1. Create another DayPilotMenu control.
2. Create the menu items.
3. Set DayPilotMenu.ClientObjectName. It is a custom identifier that will be used for assigning the menu in the event handler later (e.g. "menu2").
4. In the BeforeEventRender event handler for DayPilotCalendar, set e.ContextMenuClientName to the menu identifiet (e.g. "menu2").

Example:

protected void DayPilotCalendar1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
{
  if (e.Value ==  "4")
  {
    e.ContextMenuClientName = "menu2";
  }
}

Context menu event handling

You can choose a custom action for each menu item separately. It is possible that some menu item will execute JavaScript code and another one will execute PostBack or AJAX callback event.

Define the action by setting MenuItem.Action property:

• NavigateUrl
• JavaScript
• PostBack
• CallBack

Applicable MenuItem properties

This is an overview of MenuItem properties that are applicable for a given Action value.

NavigateUrl action

The menu item will be a standard hyperlink pointing to an URL defined by NavigateUrl property. The hyperlink will use target defined by NavigateUrlTarget property (you can use it to open the link in a frame or in a new window).

The parameters are passed using {X} replacements:

String	Will be replaced by
{0}	Calendar event value (DataValueField)
{1}	Calendar event custom data (DataTagField)

JavaScript action

The menu item will fire a custom JavaScript code defined in MenuItem.JavaScript.

Example:

<daypilot:daypilotmenu id="DayPilotMenu1" runat="server">
    <DayPilot:MenuItem Text="Testing" Action="JavaScript" 
        JavaScript="alert('Menu command ' + command + ' was executed on event ' + e.text());">
    </DayPilot:MenuItem>
</daypilot:daypilotmenu>

You can execute the AJAX callback action from you JavaScript. This example will show a confirmation dialog box before deleting an event:

    <daypilot:daypilotmenu id="DayPilotMenu1" runat="server">
        <DayPilot:MenuItem Text="Delete (JavaScript using callback)" Action="JavaScript" 
	JavaScript="if (confirm('Do you really want to delete this event?')) 
		dpc1.eventMenuClickCallBack(e, command);">
        </DayPilot:MenuItem>
    </daypilot:daypilotmenu>

Note: dpc1 is the value of DayPilotCalendar.ClientObjectName. If you don't specify ClientObjectName the object name will be the value of DayPilotCalendar.ClientID (usually something like DayPilotCalendar1 but it can be ctl00$ContentPlaceHolder1$DayPilotCalendar1 if you use master pages).

PostBack action

The menu item will fire a server-side event using PostBack.

You should handle EventMenuClick event on the server (you can do it by double-clicking EventMenuClick event in the Properties window in Visual Studio) and apply the changes to your data source (usually a database).

A typical EventMenuClick handler for PostBack will look like this:

protected void DayPilotCalendar1_EventMenuClick(object sender, 
	DayPilot.Web.Ui.Events.EventMenuClickEventArgs e)
{
        if (e.Command == "Delete") {
             // Update your database
            // ...

            DayPilotCalendar1.DataBind();
        }
}

AJAX callback action

The menu item will fire a server-side event using AJAX callback.

In the handler, you should update your data source and call DataBind(). If you call Update() method the changes will be sent back to the client and the events will be redrawn according to the new state.

A typical EventMenuClick handler for AJAX callback will look like this:

protected void DayPilotCalendar1_EventMenuClick(object sender, 
	DayPilot.Web.Ui.Events.EventMenuClickEventArgs e)
{
        if (e.Command == "Delete") {
             // Update your database
            // ...

            DayPilotCalendar1.DataBind();
            DayPilotCalendar1.Update();
        }
}

Note that the same event handler is used for PostBack and CallBack events. You can detect the event source (PostBack or CallBack) by checking e.Source property.

Note: When the MenuItemClick handler is invoked by AJAX callback, the state of page controls is not available (in contrast to PostBack).

Note: If you do not use PostBack handling on your page (either for DayPilot or for any other control) you should turn off ViewState to improve the page performance.

Server-side event arguments (EventMenuClickEventArgs)

The EventMenuClick handler will receive information about the action performed on the client (this applies both to PostBack and CallBack). EventMenuClickEventArgs class contains the following properties:

• Command
• Source
• Tag
• Value

Client-side event arguments

The following variables are available in the JavaScript handler:

Argument	Description
e	DayPilotCalendar.Event object
command	Menu command (MenuItem.Command value)

DayPilotCalendar.Event

The following functions can be used to retrieve the event properties:

• e.value() - string, from DataValueField
• e.text() - string, from DataTextField
• e.tag() - string, from DataTagField
• e.start() - Date, from DataStartField
• e.end() - Date, from DataEndField
• e.partStart() - Date, starting time of event part (for overnight events)
• e.partEnd() - Date, ending time of event part (for overnight events)