Click here to Skip to main content
Click here to Skip to main content

MenuPilot 1.0 (Open-Source Context Menu for ASP.NET 2.0)

By , 23 Dec 2006
Rate this:
Please Sign up or sign in to vote.
Prize winner in Competition "ASP.NET Sep 2006"

Introduction

Use case #1: GridView action items

This control allows you to replace this table:

with a much more simple one:

Use case #2: Image actions

MenuPilot supports task menus for images as well. You can replace this UI:

with a more compact one:

This is especially useful if you have a page full of images and there is no space for action links.

MenuPilot Features

  • Customizable hint icon
  • Customizable colors
  • Supports data binding
  • Supports menu item separators
  • Full Visual Studio .NET 2005 design-time support
  • Compiled for ASP.NET 2.0
  • Available for three inline ASP.NET controls: HyperLink, Label and Image
  • Menu items support title and target link attributes
  • Menu items can execute JavaScript or go to a URL
  • Includes fix for Internet Explorer z-index bug
  • Includes fix for Internet Explorer windowed controls z-index bug

How it works

There is nothing complicated about the concept:

  • There are two hidden elements drawn for a MenuPilot control: the "hint icon" and the "task menu".
  • The "hint icon" appears when a user hovers over the control with a mouse (onmouseover event).
  • The "task menu" appears when a user clicks on the hint icon.
  • Both the hint icon and the task menu disappear when the user moves the mouse out of the menu.

What's required to make it work

However, there are a lot of tasks that need to be done in order to make it work nicely:

  1. It is necessary to wait some time before the hint icon is activated after the onmouseover event. It is also necessary to wait some before it is deactivated after the onmouseout event:
    function __menuPilot_activateLabel(o)
    {
      if (__menuPilot_activeId != o.id)
        __menuPilot_clearNow();
    
      if (__menuPilot_t != null)
        clearTimeout(__menuPilot_t);
    
      __menuPilot_waitingFor = o.id;
      __menuPilot_t = setTimeout(__menuPilot_activateLabelLater, 100);
    }
    
    function __menuPilot_activateLabelLater() 
    {
      document.getElementById(__menuPilot_waitingFor + 'down').style.display = '';
      __menuPilot_activeId = __menuPilot_waitingFor;
    }
  2. It is necessary to deactivate the hint icon and the task menu when a user hovers over another MenuPilot control:

    All the necessary <span> elements (i.e. the main text <span>, hint icon <span> and menu <span>) call the following function on onmouseout event:

    function __menuPilot_clearAll()
    {
      if (__menuPilot_t != null)
        clearTimeout(__menuPilot_t);
      __menuPilot_t = setTimeout(__menuPilot_clearNow, 300);
    }
    
    function __menuPilot_clearNow()
    {
      var id = __menuPilot_activeId;
      if (id == null)
        return;
      __menuPilot_deactivateLabel(document.getElementById(id));
      __menuPilot_deactivateMenu(document.getElementById(id + 'menu'));
      __menuPilot_activeId = null;
      __menuPilot_isActiveMenu = false;
    }
  3. It is necessary to draw the menu over all <select> elements in Internet Explorer:

    There is a workaround available for an IE bug that draws all <select> elements always on the top (i.e. over the menu). See http://dotnetjunkies.com/WebLog/jking/archive/2003/10/30/2975.aspx

The controls

There are three controls available in MenuPilot:

  • MenuPilotHyperLink
  • MenuPilotLabel
  • MenuPilotImage

They are derived from standard HyperLink, Label, and Image controls so all the standard functionality is available.

[PersistChildren(false)]
[ParseChildren(true, "MenuItems")]
[DefaultProperty(null)]
[Designer(typeof(ControlDesigner))]
[ToolboxBitmap(typeof(HyperLink))]
public class MenuPilotHyperlink : HyperLink
{
//...

It only adds the customization properties:

Property Type Description Default value
AppearAfter System.Int32 Number of milliseconds to wait before the hint icon appears. 100
DisappearAfter System.Int32 Number of milliseconds to wait before the menu disappears. 500
HintIcon System.String Path of the hint icon. "action.gif"
HintIconHeight System.Int32 Hint icon height in pixels. 11
HintIconWidth System.Int32 Hint icon width in pixels. 11
MenuActionColor System.Drawing.Color Color of the task menu items (hyperlinks). #2859AB
MenuBackColor System.Drawing.Color Color of the task menu background. #F0EEE1
MenuBorderColor System.Drawing.Color Color of the task menu border #ACA899
MenuFontSize System.String Task menu font size (CSS syntax). 8pt
MenuItems
MenuPilot.Web.Ui.
MenuItemCollection
Collection of menu items. null
MenuTitle System.String Title of the task menu. "Tasks"
MenuTitleBackColor System.Drawing.Color Color of the task menu title background. #C1D2EE
Value System.String Bindable string property that is used for passing some value to menu item hyperlinks. null

Acknowledgements

  • Joe King Sample for using a DIV IFRAME shim to cover over SELECT Boxes and other windowed controls in IE

Resources

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Dan Letecky

Czech Republic Czech Republic
My open-source event calendar/scheduling AJAX controls:
 
DayPilot for JavaScript/HTML5/jQuery
DayPilot for ASP.NET
DayPilot for MVC
DayPilot for Java

Comments and Discussions

 
QuestionSub menu Pinmemberkeyur soni26-Jul-11 1:23 
GeneralMy vote of 5 PinmemberRhuros24-May-11 0:02 
GeneralIssue PinmemberShawn Lawsure21-Apr-11 9:31 
GeneralNice one! PinmemberSandeep Mewara30-Mar-10 6:40 
NewsSource code available online PinmemberGilad Khen30-May-09 16:47 
QuestionTreeNode PinmemberLeleHalfon7-Mar-07 12:02 
GeneralRe: TreeNode Pinmemberpoteet30-Apr-07 17:52 
Generalnice ! I will translate this article to chinese ,and post on cnblogs.com and intorduce to chinese programmer Pinmemberyueue25-Jan-07 17:18 
QuestionCould you add a change history? Pinmemberroberthking26-Dec-06 3:41 
QuestionTrigger linkbuttons in datagrid? [modified] PinmemberRoVliet18-Dec-06 23:33 
Very nice control! Navigating to urls is no problem but can I use this control to trigger buttons on a datagrid? I mean like with building a clickable row you would do as postback to the editrow button with a javascript:__doPostBack with the itemindex. Besides the value field, the menupilot:menuitem has no databinding so I cannot distinguish the rownumber?
 
Any idea how to bind more variables than just the value field in {0}?
 
regards
Robert
 

-- modified at 10:20 Wednesday 20th December, 2006
AnswerRe: Trigger linkbuttons in datagrid? PinmemberRoVliet20-Dec-06 5:43 
GeneralReally nice, but i've got a problem PinmemberJosema18-Dec-06 2:43 
GeneralRe: Really nice, but i've got a problem PinmemberDan Letecky18-Dec-06 10:29 
GeneralRe: Really nice, but i've got a problem PinmemberJosema18-Dec-06 22:04 
GeneralRe: Really nice, but i've got a problem PinmemberShawn Lawsure16-Apr-11 7:41 
QuestionGreat Control! Will this work with VE??? PinmemberTomMolskow13-Dec-06 7:17 
AnswerRe: Great Control! Will this work with VE??? PinmemberDan Letecky18-Dec-06 10:29 
GeneralElegant and Exciting PinmemberVasudevan Deepak Kumar6-Dec-06 1:20 
GeneralRe: Elegant and Exciting PinmemberDan Letecky18-Dec-06 10:30 
GeneralSweet Pinmemberleppie21-Nov-06 6:03 
GeneralRe: Sweet PinmemberDan Letecky22-Nov-06 0:46 
GeneralNice work PinmemberMike Ellison10-Nov-06 5:14 
GeneralRe: Nice work PinmemberDan Letecky10-Nov-06 22:37 
GeneralRe: Nice work PinmemberMike Ellison11-Nov-06 4:44 
GeneralRe: Nice work PinmemberDan Letecky22-Nov-06 0:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140415.2 | Last Updated 23 Dec 2006
Article Copyright 2006 by Dan Letecky
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid