Event Context Menu

Adding Context Menu

Context menu is a standalone 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

CallBack and PostBack event handling will fire EventMenuClick event handler on the server side.

See also context menu event handling.

JavaScript Handling 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>

PostBack Example

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 Example

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.

You can activate the context menu using right click or using an active area.

Context Menu Activated on Event Right Click

The default value of EventRightClickHandling is EventRightClickHandlingType.ContextMenu.

You need to set ContextMenu property to the menu id.

View

@Html.DayPilotMenu("menu", new DayPilotMenuConfig {
  Items = new DayPilot.Web.Mvc.MenuItemCollection
  {
    new DayPilot.Web.Mvc.MenuItem { Text = "Open", Action = MenuItemAction.JavaScript, JavaScript = "alert(e.value());"}
  }
})

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig {
  BackendUrl = ResolveUrl("~/Calendar/Backend"),
  ...
  ContextMenu = "menu"
})

Note: The context menu must be declared before it is assigned (Html.DayPilotMenu must be above Html.DayPilotCalendar).

Context Menu Activated using Active Area

Add an active are in OnBeforeEventRender. See also event active areas.

View

@Html.DayPilotMenu("menu", new DayPilotMenuConfig {
  Items = new DayPilot.Web.Mvc.MenuItemCollection
  {
    new DayPilot.Web.Mvc.MenuItem { Text = "Open", Action = MenuItemAction.JavaScript, JavaScript = "alert(e.value());"}
  }
})

Backend Controller

protected override void OnBeforeEventRender(BeforeEventRenderArgs e)
{
  e.Areas.Add(new Area().Width(17).Bottom(9).Right(19).Top(3).CssClass("event_action_menu").ContextMenu("menu"));
}

These sample classes (event_action_delete and event_action_menu) are defined in Themes/areas.css (plus Themes/areas directory) so don't forget to include it.