Click here to Skip to main content
12,509,932 members (42,996 online)
Click here to Skip to main content
Add your own
alternative version

Stats

127.8K views
1.1K downloads
197 bookmarked
Posted

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

, 23 Dec 2006
Rate this:
Please Sign up or sign in to vote.
Fine DHTML context menu with layout of Action Lists/Smart Tags known from Visual Studio .NET 2005

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:

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
MenuItems
MenuPilot.Web.Ui.
MenuItemCollection
Collection 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

Share

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

You may also be interested in...

Pro
Pro

Comments and Discussions

 
QuestionSub menu Pin
keyur soni26-Jul-11 1:23
memberkeyur soni26-Jul-11 1:23 
Hello,

can you please tell me.
How i can create sub menu by using this control??
Confused | :confused:
GeneralMy vote of 5 Pin
Rhuros24-May-11 0:02
memberRhuros24-May-11 0:02 
GeneralIssue Pin
Shawn Lawsure21-Apr-11 9:31
memberShawn Lawsure21-Apr-11 9:31 
GeneralNice one! Pin
Sandeep Mewara30-Mar-10 6:40
memberSandeep Mewara30-Mar-10 6:40 
NewsSource code available online Pin
Gilad Khen30-May-09 16:47
memberGilad Khen30-May-09 16:47 
QuestionTreeNode Pin
LeleHalfon7-Mar-07 12:02
memberLeleHalfon7-Mar-07 12:02 
GeneralRe: TreeNode Pin
poteet30-Apr-07 17:52
memberpoteet30-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
memberyueue25-Jan-07 17:18 
QuestionCould you add a change history? Pin
roberthking26-Dec-06 3:41
memberroberthking26-Dec-06 3:41 
QuestionTrigger linkbuttons in datagrid? [modified] Pin
RoVliet18-Dec-06 23:33
memberRoVliet18-Dec-06 23:33 
AnswerRe: Trigger linkbuttons in datagrid? Pin
RoVliet20-Dec-06 5:43
memberRoVliet20-Dec-06 5:43 
GeneralReally nice, but i've got a problem Pin
Josema18-Dec-06 2:43
memberJosema18-Dec-06 2:43 
GeneralRe: Really nice, but i've got a problem Pin
Dan Letecky18-Dec-06 10:29
memberDan Letecky18-Dec-06 10:29 
GeneralRe: Really nice, but i've got a problem Pin
Josema18-Dec-06 22:04
memberJosema18-Dec-06 22:04 
GeneralRe: Really nice, but i've got a problem Pin
Shawn Lawsure16-Apr-11 7:41
memberShawn Lawsure16-Apr-11 7:41 
QuestionGreat Control! Will this work with VE??? Pin
TomMolskow13-Dec-06 7:17
memberTomMolskow13-Dec-06 7:17 
AnswerRe: Great Control! Will this work with VE??? Pin
Dan Letecky18-Dec-06 10:29
memberDan Letecky18-Dec-06 10:29 
GeneralElegant and Exciting Pin
Vasudevan Deepak Kumar6-Dec-06 1:20
memberVasudevan Deepak Kumar6-Dec-06 1:20 
GeneralRe: Elegant and Exciting Pin
Dan Letecky18-Dec-06 10:30
memberDan Letecky18-Dec-06 10:30 
GeneralSweet Pin
leppie21-Nov-06 6:03
memberleppie21-Nov-06 6:03 
GeneralRe: Sweet Pin
Dan Letecky22-Nov-06 0:46
memberDan Letecky22-Nov-06 0:46 
GeneralNice work Pin
Mike Ellison10-Nov-06 5:14
memberMike Ellison10-Nov-06 5:14 
GeneralRe: Nice work Pin
Dan Letecky10-Nov-06 22:37
memberDan Letecky10-Nov-06 22:37 
GeneralRe: Nice work Pin
Mike Ellison11-Nov-06 4:44
memberMike Ellison11-Nov-06 4:44 
GeneralRe: Nice work Pin
Dan Letecky22-Nov-06 0:48
memberDan Letecky22-Nov-06 0:48 
GeneralRe: Nice work Pin
Mike Ellison22-Nov-06 4:43
memberMike Ellison22-Nov-06 4:43 
GeneralMS AJAX Control Extender Pin
ZeusZ7131-Oct-06 2:08
memberZeusZ7131-Oct-06 2:08 
GeneralRe: MS AJAX Control Extender Pin
Dan Letecky22-Nov-06 0:49
memberDan Letecky22-Nov-06 0:49 
GeneralGreat Control! Pin
stuart_roberts25-Oct-06 13:25
memberstuart_roberts25-Oct-06 13:25 
GeneralRe: Great Control! Pin
Dan Letecky22-Nov-06 0:50
memberDan Letecky22-Nov-06 0:50 
QuestionJust what I was looking for Pin
Phil Sidari25-Oct-06 4:54
memberPhil Sidari25-Oct-06 4:54 
AnswerRe: Just what I was looking for Pin
Dan Letecky25-Oct-06 8:47
memberDan Letecky25-Oct-06 8:47 
GeneralAwesome! Pin
Jamie Nordmeyer25-Oct-06 4:49
memberJamie Nordmeyer25-Oct-06 4:49 
GeneralRe: Awesome! Pin
Andrew Rissing25-Oct-06 5:51
memberAndrew Rissing25-Oct-06 5:51 
GeneralRe: Awesome! Pin
Dan Letecky25-Oct-06 9:37
memberDan Letecky25-Oct-06 9:37 

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.

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