Click here to Skip to main content
15,867,568 members
Articles / Web Development / HTML
Article

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

Rate me:
Please Sign up or sign in to vote.
4.94/5 (60 votes)
23 Dec 20063 min read 160.9K   1.2K   195   35
Fine DHTML context menu with layout of Action Lists/Smart Tags known from Visual Studio .NET 2005

Image 1

Introduction

Use case #1: GridView action items

This control allows you to replace this table:

Image 2

with a much more simple one:

Image 3

Use case #2: Image actions

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

Image 4

with a more compact one:

Image 5

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

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

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

It only adds the customization properties:

PropertyTypeDescriptionDefault value
AppearAfterSystem.Int32Number of milliseconds to wait before the hint icon appears.100
DisappearAfterSystem.Int32Number of milliseconds to wait before the menu disappears.500
HintIconSystem.StringPath of the hint icon."action.gif"
HintIconHeightSystem.Int32Hint icon height in pixels.11
HintIconWidthSystem.Int32Hint icon width in pixels.11
MenuActionColorSystem.Drawing.ColorColor of the task menu items (hyperlinks).#2859AB
MenuBackColorSystem.Drawing.ColorColor of the task menu background.#F0EEE1
MenuBorderColorSystem.Drawing.ColorColor of the task menu border#ACA899
MenuFontSizeSystem.StringTask menu font size (CSS syntax).8pt
MenuItemsMenuPilot.Web.Ui.<br />MenuItemCollectionCollection of menu items.null
MenuTitleSystem.StringTitle of the task menu."Tasks"
MenuTitleBackColorSystem.Drawing.ColorColor of the task menu title background.#C1D2EE
ValueSystem.StringBindable 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


Written By
Czech Republic Czech Republic
My open-source event calendar/scheduling web UI components:

DayPilot for JavaScript, Angular, React and Vue

Comments and Discussions

 
QuestionSub menu Pin
keyur soni26-Jul-11 1:23
keyur soni26-Jul-11 1:23 
GeneralMy vote of 5 Pin
Rhuros24-May-11 0:02
professionalRhuros24-May-11 0:02 
GeneralIssue Pin
Shawn Lawsure21-Apr-11 9:31
Shawn Lawsure21-Apr-11 9:31 
GeneralNice one! Pin
Sandeep Mewara30-Mar-10 6:40
mveSandeep Mewara30-Mar-10 6:40 
QuestionTreeNode Pin
LeleHalfon7-Mar-07 12:02
LeleHalfon7-Mar-07 12:02 
GeneralRe: TreeNode Pin
poteet30-Apr-07 17:52
poteet30-Apr-07 17:52 
Generalnice ! I will translate this article to chinese ,and post on cnblogs.com and intorduce to chinese programmer Pin
yueue25-Jan-07 17:18
yueue25-Jan-07 17:18 
QuestionCould you add a change history? Pin
roberthking26-Dec-06 3:41
roberthking26-Dec-06 3:41 
QuestionTrigger linkbuttons in datagrid? [modified] Pin
Robert van Vliet18-Dec-06 23:33
Robert van Vliet18-Dec-06 23:33 
AnswerRe: Trigger linkbuttons in datagrid? Pin
Robert van Vliet20-Dec-06 5:43
Robert van Vliet20-Dec-06 5:43 
GeneralReally nice, but i've got a problem Pin
Josema18-Dec-06 2:43
Josema18-Dec-06 2:43 
GeneralRe: Really nice, but i've got a problem Pin
Dan Letecky18-Dec-06 10:29
Dan Letecky18-Dec-06 10:29 
GeneralRe: Really nice, but i've got a problem Pin
Josema18-Dec-06 22:04
Josema18-Dec-06 22:04 
GeneralRe: Really nice, but i've got a problem Pin
Shawn Lawsure16-Apr-11 7:41
Shawn Lawsure16-Apr-11 7:41 
QuestionGreat Control! Will this work with VE??? Pin
TomMolskow13-Dec-06 7:17
TomMolskow13-Dec-06 7:17 
AnswerRe: Great Control! Will this work with VE??? Pin
Dan Letecky18-Dec-06 10:29
Dan Letecky18-Dec-06 10:29 
GeneralElegant and Exciting Pin
Vasudevan Deepak Kumar6-Dec-06 1:20
Vasudevan Deepak Kumar6-Dec-06 1:20 
GeneralRe: Elegant and Exciting Pin
Dan Letecky18-Dec-06 10:30
Dan Letecky18-Dec-06 10:30 
GeneralSweet Pin
leppie21-Nov-06 6:03
leppie21-Nov-06 6:03 
GeneralRe: Sweet Pin
Dan Letecky22-Nov-06 0:46
Dan Letecky22-Nov-06 0:46 
GeneralNice work Pin
Mike Ellison10-Nov-06 5:14
Mike Ellison10-Nov-06 5:14 
GeneralRe: Nice work Pin
Dan Letecky10-Nov-06 22:37
Dan Letecky10-Nov-06 22:37 
GeneralRe: Nice work Pin
Mike Ellison11-Nov-06 4:44
Mike Ellison11-Nov-06 4:44 
GeneralRe: Nice work Pin
Dan Letecky22-Nov-06 0:48
Dan Letecky22-Nov-06 0:48 
Unfortunately, I don't have the time to make it compatible with Firefox 1.0 (there are two new major versions released already).

Sorry.

--
My sites for smart .NET developers:
DayPilot - Open-source Outlook-like calendar control for ASP.NET
DotLucene - The fastest open source fulltext search engine for .NET
MenuPilot - Open-source task menu for ASP.NET 2.0
Seekafile Server - Flexible open-source search server
DotNetFirebird

GeneralRe: Nice work Pin
Mike Ellison22-Nov-06 4:43
Mike Ellison22-Nov-06 4:43 

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

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