Create a Context-Sensitive Menu

UI Tip

LANGUAGE: HTML |JavaScript | All .NET Languages

ASP.NET VERSIONS: 1.0 | 1.1

Create a Context-Sensitive Menu

Give your users a customized menu they can use whenright-clicking in your ASP.NET apps.

By Brad McCabe

One of the common features in Windows applications is theability to right-click on a section of an application or form and get acontext-sensitive menu. If a user right-clicks in an ASP.NET application,however, the browser shows its own menu. This is rarely helpful for the user,and in some cases causes unexpected results in the application.

In this week's tip we'll take a look at creating a simplecontext menu. We'll enhance this menu in an upcoming installment of thiscolumn.

The base for this browser-based context menu is the contextMenuevent that Internet Explorer raises on the client side when a user right-clickson a Web page. We'll begin by looking at the client-side JavaScript that willbe used to render the menu, then view how the code is created on the Webserver.

The first thing that needs to be done in Internet Exploreris to create a popup-style window. This is done with the following line ofcode:

var PopWindow = window.createPopup();

The createPopup function will return a pointer to thenewly created (and hidden) popup window. For more information on this functionyou can visit http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/createpopup.asp.

Once you have the reference to the popup window, you needto wire the client-side event, onContextMenu, to your own JavaScript function:

document.oncontextmenu = function() {dopopup(event.x,event.y);return false; }

This line of code couples the onContextMenu event to afunction called doPopUp. When this function is invoked, the x and ycoordinates of the mouse are passed to the function.

Now that the window has been created and the event wiredup, the only thing left to do is write the code to handle the event:

function dopopup(x,y) {

  var PopupHTML =PopWindow.document.body;

  PopupHTML.innerHTML =;

  PopWindow.show(x, y,140, 220, document.body);

}

The first line of the doPopUp function gets a pointer tothe contents of the window that you created earlier. Since this is a completewindow you have access to the body object to add any HTML that you would liketo add.

Next, the HTML for the popup menu is inserted. This can beany HTML that you would like to have in the popup, although tables work bestfor maintaining formatting. Still, experiment with other tags here based onyour needs.

After the HTML is inserted, the window is shown andpositioned at the x and y position of the mouse. The height andwidth can be adjusted as needed to contain the HTML that you are inserting.

Figure 1 shows the basic code that can be added in yourpage load event to generate a basic 11-item pop up menu, shown in Figure 2.

Dim HTML As NewSystem.Text.StringBuilder()

With HTML

 .Append("  BGCOLOR=""#CCCCCC""WIDTH=""140"" HEIGHT=""220"" _  CELLPADDING=""0""CELLSPACING=""1"">")  .Append("")  .Append("a:link{text-decoration:nonefont-family: _   Arialfont-size:8pt}")  .Append("a:visited {text-decoration:nonefont-family: _   Arialfont-size:8pt}")  .Append("td{font-size:8pt}")  .Append("")    .Append("_    Line1")  .Append("_    Line2") .Append("_    Line3")  .Append("_    Line4") .Append("_    Line5")  .Append("_    Line6") .Append("_    Line7")  .Append("_    Line 8") .Append("_    Line9")  .Append("_    Line10") .Append("_    Line11")   .Append("") End With  Dim Script As NewSystem.Text.StringBuilder()  With Script .Append("")  .Append("varPopWindow = window.createPopup();")    .Append("functiondPopWindow(x,y) {")  .Append("varPopupHTML = PopWindow.document.body;")  .Append("PopupHTML.innerHTML = '" & HTML.ToString& "';")  .Append("PopWindow.show(x, y, 140, 220,document.body);")  .Append("}")    .Append("document.oncontextmenu = function() { _   dPopWindow(event.x,event.y);return false; }")  .Append("") End With   RegisterStartupScript("ContextMenu", Script.ToString) End SubFigure 1. Use thiscode in your page load event to generate a basic 11-item pop-up menu.  
Figure 2. The code in Figure 1creates this simple pop-up menu.   In the next installment of this column we'll look atbuilding on this foundation to add more features, such as mouse-over on themenu items, images, and other functionality.   Got a UI question, tip, or idea for a topic you'd like meto cover? I'd love to hear it. E-mail me at [email protected].   The sample code in this article is available for download.   Brad McCabe is thetechnical evangelist for Infragistics. Brad also has been a systems architectand consultant for Verizon Communications and many other clients, and he was aleading .NET evangelist within Ajilon Consulting. His primary interests includeASP.NET, Windows CE .NET, .NET Compact Framework, and Microsoft's networkingtechnologies. E-mail him at [email protected].