Ajax: HoverMenuExtender
The HoverMenuExtender can be a fabulous control that can be used to jazz up your website and increase the actual usability of your site. It works by attaching itself to a control such as a LinkButton, Image, or pretty much any control you see fit.
The HoverMenuExtender is different than both PopUp and ModalPopUpExtender in the following ways:
The HoverMenuExtender only is displayed when the mouse hovers over the target and if displayed - only while the mouse falls within the display. Moving the mouse outside of the display area 'closes' the display.
The PopUp control is bound to a input field. It is designed to act like a seperate forms window and pass the results back to the calling control. For example a textbox linked to a PopUp that displays a calendar. The PopUp will probably be designed to pass back the selected date to the textbox.
A ModalPopUp is used to actually display a window that can stay open indefinately. Usually would be used for actual form input where the controls inside the ModalPopUp are directly responsible for submission, edit or viewing data. For example - selecting a record in a GridView you can display the form over the page for editing the record. It takes an explicit postback in which either a button control or in code behind invokes the ModalPopUp.Hide() function. Additionally, the ModalPopUp 'de-activates' all other controls on the page. It will not however, if invoked in a Iframe - disable the full page - but only those controls within the Iframe the ModalPopUp is invoked from.
Problem:
If you need a interactive menu structure and thus require controls for evaluating choices a HoveMenuExtender may not be the first choice. If you attach a HoverMenuExtender to a control, and require real-time updating of the content in a HoverMenuExtender - it simply will not work without a changes in your programming approach .
The issue is that once any kind of postback is made (such as a RadioButtonList with AutoPostBack property set to true) in the display of the HaverMenuExtender, you will be able to process the select event and behind the scenes you can process and update whatever copntrols are contained in the HoverMenuExtender content. However; after the server processes the request, the HoverMenuExtender will cause the 'popup' to dissapear. Moving the mouse back over the target link will then re-display the menu and the updated control values will be displayed. In other words - three click method (very annoying) - but the HoverMenuExtender was not designed for form handling.
Work Around:
Adopt a programming strategy where all of the controls used in the display of the HoverMenuExtender do not perform postbacks. Instead add a "Save" or "Submit" option that does the postback instead and then do whatever you need to on the back-end to update the display on next browse over, save to the database, or update running values. By providing this logic in your UI design the end user already knows that a Save or Submit will most likely close the Hover Panel. Yes, it limits some options but if you need more extensibility - the ModalPopUp or PopUp control will probably be better suited.
Additional Info:
If you want to provide more of a action oriented enviroment where you display a list of options and know that it is meant to be like a menu - then do so (it was afterall what it was designed for). The HoverMenuExtender is a perfect fit for those scenarios. In my the Administrative UI of Sites-Easy I use this control to provide what I call "Quick Tasks", where I place commands like "Enable Tracing", "Reset Cache", "Reset Server" etc... where these tasks will be used but the amount of effort to drill down through menus to find the options may not be time conducive. Additionally, I also incorporate the work around so if a Admin selects the Trace link - a HoverMenuExtender displays a control that allows selecting the Trace options and a submit to save or a link to view current trace.
Performance Caveat:
Unlike the ModalPopUp, since it is invoked by mouseover's - it is nearly impossible (I haven't seen a way to do it - but doesn't mean without some creative javascripting that it can't be done)to have only a single instance of the control and have it programically select the display - using only one instance of the control. So, in order to use it with a gridview - it must be bound to each row. A ModalPopUp since it is invoked by an click event - one instance can be used as in code behind you can assign whatever you want displayed. If you have a large gridview - and resort to using the HoverMenuExtender (such as the example shown with the sample AjaxControlToolkit website - be aware this will be resource intensive. Java has performance issues with looping through the DOM so I would recommend if it is a must to use in any kind of repeater control like the DataGrid or Gridview - minimize the results being displayed by utilizing efficient pagain and not displaying say 100 records at a time. This way you cut down on the amount of data being sent across the wire - especially in partial update neviroments (such as using a UpdatePanel).
Hover Menu for Images Display:
Tip: Here is code for inserting an images from a datasource and use the HoverMenu to display the full size image.
<asp:TemplateField ><ItemTemplate>
<asp:HyperLink ID="lnk" NavigateUrl="" runat="Server">
<asp:Image Width="100" ImageUrl='<%# String.Format("~/{0}.aspx", DataBinder.Eval(Container, "DataItem.Image_FileName"))%>' runat="Server"/>
</asp:HyperLink>
<ajax:HoverMenuExtender ID="hme2" runat="Server"
TargetControlID="lnk"
PopupControlID="showImage"
HoverCssClass="popupHover"
PopupPosition="Right" PopDelay="20" OffsetY="5" OffsetX="5" />
<asp:Panel BorderWidth="3px" ID="showImage" runat="server" CssClass="popupMenu" >
<div style="border:2px outset white">
<asp:Image ID="Image1" Width="100%" ImageUrl='<%# String.Format("~/{0}.aspx", DataBinder.Eval(Container, "DataItem.Image_FileName"))%>' runat="Server"/>
</div>
</asp:Panel>
</ItemTemplate> </asp:TemplateField>
</Columns>
The reason that the hyperlink is being attached to is because I am merely setting the navigateurl to a empty string. Less html code generated at least. More importantly I do not have to attach javascript to do a mouseover event detection. Clicking on the image has no effect as the url goes no where and the browser ignores it as a valid event. Here is the effect of the code on the display when a thumbnail is hovered over:
Summary:
The HoverMenuExtender is easily used and if you follow the sample code provided by the AjaxToolKit - you can easily program to it. Hence no code examples in this blog post but merely a discussion on the purposes and how to make it work a little bit harder.