In this topic
About the ContextMenu control
The ContextMenu control enhances user interactivity with Web Application Developer Framework (ADF) components in an application. A user event shows the control in a browser at runtime. Usually, you right-click the event on an existing control, element, or item shown on the page.
A ContextMenu can contain one or more context menu items. Each item is associated with an action to execute client or server-side code. Each context menu item can show with an icon and text, or an icon or text. The Toc and TaskResults controls include preconfigured ContextMenus to interact with their node content.
The ContextMenu control is not included with the out-of-the-box Web ADF controls integrated with Visual Studio. To use the control, add a declarative reference on your page or add the ContextMenu control to the Visual Studio toolbox, then drag-and-drop it on the page (see Using the control section in this topic).
Context menu items can only be configured programmatically; no design-time configuration is provided.
Using the control
- The ContextMenu control is not added to the toolbox in Visual Studio during the Web ADF installation; therefore, it needs to be added manually. If you have added the ContextMenu control, go to Step 5.
- Open Visual Studio and expand the ArcGIS Web Controls tab in the toolbox. Right-click the tab and click Choose Items. The Choose Toolbox Items dialog box appears.
- Select the ContextMenu control check box next to the ESRI.ArcGIS.ADF.UI.WebControls namespace. See the following screen shot:
- Click OK on the Choose Toolbox Items dialog box. The ContextMenu control is added to the toolbox.
- Add a MapResourceManager and Map control to the page.
- Add a resource item to the MapResourceManager. In this example, a ContextMenu control will be constructed to use on a Map control. A ContextMenu can be associated with any element on the page; therefore, the patterns shown in this example apply in other situations.
- Drag the ContextMenu control onto the page (the location of the ContextMenu control at design-time does not determine the location of the context menu at runtime). See the following screen shot:
- In design mode, click the ContextMenu control. The Properties window shows the properties for the control.
- Set the BackColor property to a solid color, for example, white or gray. By default, the BackColor property is not set; therefore, the context menu appears transparent at runtime.
- Adding items and configuring the behavior of a ContextMenu control requires writing code. Context menu items can be created using the ContextMenuItem class and added to the ContextMenu control. Properties of a ContextMenuItem include the uniform resource locator (URL) to an image, menu item text, and string representing custom JavaScript code to execute when the item is clicked. Add new context menu items during the page's life span at the initial page load event. Add the following code example to the code-behind page:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ESRI.ArcGIS.ADF.Web.UI.WebControls.ContextMenuItem contextMenuItem = new
ESRI.ArcGIS.ADF.Web.UI.WebControls.ContextMenuItem();
contextMenuItem.Text = "Zoom In";
ContextMenu1.Items.Add(contextMenuItem);
}
}
- The browser event that shows the context menu at the necessary time must be added to the correct control, element, and item on the page. In this example, the ContextMenu needs to show when right-clicked on a map. At runtime, the Map control generates a div to display map data in a browser. A set of attribute events can be configured on the div. The oncontextmenu attribute enables the browser to listen for right-click events on an element. When this event is triggered, JavaScript code is used to show the ContextMenu control and items. The Web ADF provides a set of JavaScript functions to show and hide context menus. When the oncontextmenu event is triggered on the map, the esriShowContextMenu() JavaScript function is called and the ContextMenu shows. As previously discussed, add attribute information to controls and elements during the page load event. The following shows the previous code example with the esriShowContextMenu() function:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ESRI.ArcGIS.ADF.Web.UI.WebControls.ContextMenuItem contextMenuItem = new
ESRI.ArcGIS.ADF.Web.UI.WebControls.ContextMenuItem();
contextMenuItem.Text = "Zoom In";
ContextMenu1.Items.Add(contextMenuItem);
string showContextMenu = string.Format(
"esriShowContextMenu(event,'{0}','{1}','{2}');return false;",
ContextMenu1.ClientID, Map1.UniqueID, "");
Map1.Attributes.Add("oncontextmenu", showContextMenu);
}
}
- When the ContextMenu shows at runtime, you can click a context menu item to initiate an action. To use the click event on the server, handle the ItemClicked event on the ContextMenu. When the menu item is clicked, a callback request is sent to the page that contains the context menu. The context menu item is identified by its text and made available by the ContextMenuItemEventArgs passed to the ItemClicked event. The ContextMenu control works with the ASP.NET callback architecture. For more information, see Working with AJAX and ASP.NET.
Implementation code on the server interacts with server-side content based on the context menu item that is clicked. The ContextMenu control generates the callback response processed by the Web ADF JavaScript. Changes to other controls on the page must be packaged as CallbackResults and added to the ContextMenu.CallbackResults property (a collection of CallbackResult objects). For more information on the Web ADF implementation of the ASP.NET callback framework, see AJAX capabilities in the Web ADF. - To handle the ItemClicked event on the ContextMenu, open the ContextMenu Properties page and click the Events
button to view the events. See the following screen shot:
- Double-click the ItemClicked event. The code-behind page shows with the created implementation method.
- Add the following code example to the event handler method. The Map.Zoom() convenience method causes the map to zoom in and changes the map extent. The map has changed, but the ContextMenu is generating the callback response.
protected void ContextMenu1_ItemClicked(object sender,
ESRI.ArcGIS.ADF.Web.UI.WebControls.ContextMenuItemEventArgs
contextMenuItemEventArgs)
{
switch (contextMenuItemEventArgs.Item.Text)
{
case "Zoom In":
{
Map1.Zoom(2);
ContextMenu1.CallbackResults.CopyFrom(Map1.CallbackResults);
break;
}
}
}
- When the Web application starts, the ContextMenu is not visible. Right-click the control that shows the ContextMenu (in this example, the Map control). The ContextMenu shows with its context menu items. Click the Zoom In item to zoom in on the map. See the following screen shot:
Members
The following table shows a list of properties related to the ContextMenu control. For more reference information, see the ContextMenu control in the library reference section.
|
Property name
|
Type
|
Description
|
|
HoverBorderColor
|
Color
|
The border color around a context menu item when the cursor hovers over it at runtime.
|
|
HoverColor
|
Color
|
The background color of the context menu item when the cursor hovers over it at runtime.
|
Events
The following table shows an event related to the ContextMenu control:
|
Event type
|
Description
|
|
ItemClicked
|
Occurs when a context menu item is clicked.
|
See Also:
How to work with partial postbacks in an ASP.NET Web applicationHow to work with client callbacks in an ASP.NET Web application
Web ADF controls
Customizing the Web Mapping application
To use the code in this topic, reference the following assemblies in your Visual Studio project. In the code files, you will need using (C#) or Imports (VB .NET) directives for the corresponding namespaces (given in parenthesis below if different from the assembly name):
ESRI.ArcGIS.ADF.Web.UI.WebControls.dll