What is it?
The Atlas HoverMenuExtender gives you a way to easily add a panel with extra content to a control, without clutteruing up the screen. You can bind all the data in your grid, while at the same time binding your hover menu panel, therefore keeping all you code in one simple place but adding nice functionality.
Pros?
- Clean up your interface by only showing key data, and showing extra data on hover
- Have a fast way to show master/detail data
- Hide all your extra command buttons in a GridView
Cons?
- For a first time user of your site, it may not be that obvious that extra data is available on mouse over
- It may also be annoying that menus keep popping up whenever scrolling past a grid
- Must set the visibility to hidden in the stylesheet to make sure the panel doesn't show quickly when the page is loading
- As a note I had a slight hitch when trying this extender in a real situation, in that nothing showed. Funnily enough it worked in Firefox though, and it turned out that an "overflow:auto" (ie HTML scroll bar) in another control on that form caused the issue
- PopDelay says how long to leave the popup there, whereas I would have though it would indicate how long to wait before showing it.
I feel there are a couple of tricks to the trade here, and some of these apply to other Atlas extenders also:
- In my example, having width="100%" on the GridRowPanel (panel shown in grid before popup) means the popup will appear anywhere on the grid, otherwise it will only appear when hovering over the actual content. Another way to fix this is have a background color. Also this works as I would have expected in Firefox, just not IE.
- The popup window must be hidden by default, otherwise you will notice the control breifly while the page loads. Atlas will make it visible again when it needs to. Do this with Visibility:hidden in the stylesheet or add style="display:none"
- The HoveMenuExtender MUST be placed in the ItemTemplate/EditTemplate etc for a GridView. This is because the target control is internal to that template, and therefore isn't visible to controls outside the grid.
- Certainly on a grid PopDelay should be short to avoid ugly or unreadable popups for other rows.
Example
In this example, I'd like to show a few extra fields in a GridView when hovering over a row with the mouse.
- Add an Atlas ScriptManager to the form
- Setup a GridView with an ItemTemplate with many columns
- Add the databinding code how you wish to your data.
- In the ItemTemplate have one panel for the columns you want to show and one for the columns you want to have as the hover panel
- Make sure the hover panel has Visibility:hidden in the style or style="display:none" in the panel tag
- Add a HoverMenuExtender inside the ItemTemplate
- Set the TargetControlID to the panel you want to permanently display on the grid.
- Set the PopupControlID to the panel you want to show when the mouse hovers over the grid
- Finally set a HoverCssClass for how you want the main grid row to look when hovered over
- PopupPosition dictates on which edge of the TargetControlID you want the popup to appear
- OffsetX, OffsetY say how far down and right to place the popup from PopupPosition.
- PopDelay means how long the popup will show once the mouse leaves the control. Set this to a low amount on grids.
<%@ Page Language="C#" %>
<%@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="cc1" %>
<%@ Import Namespace="System.Collections.Generic" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
public class Mp3Class
{
private int _Mp3Number;
private string _Artist;
private string _SongTitle;
private decimal _Rating;
public int Mp3Number { get { return _Mp3Number; } set { _Mp3Number = value; } }
public string Artist { get { return _Artist; } set { _Artist = value; } }
public string SongTitle { get { return _SongTitle; } set { _SongTitle = value; } }
public decimal Rating { get { return _Rating; } set { _Rating = value; } }
public Mp3Class(int Mp3Number, string Artist, string SongTitle, decimal Rating)
{
this.Mp3Number = Mp3Number;
this.Artist = Artist;
this.SongTitle = SongTitle;
this.Rating = Rating;
}
}
protected void Page_Load(object sender, EventArgs e)
{
List<Mp3Class> Mp3List = new List<Mp3Class>();
Mp3List.Add(new Mp3Class(1, "Bernard Fanning", "Wish You Well", 8));
Mp3List.Add(new Mp3Class(2, "Ben Lee", "Catch My Disease", 7));
Mp3List.Add(new Mp3Class(3, "Gorillaz", "Feel Good Inc.", 9));
Mp3List.Add(new Mp3Class(4, "Foo Fighters", "Best Of You", 6));
Mp3List.Add(new Mp3Class(5, "Gorillaz", "Dare", 9));
TopFiveList.DataSource = Mp3List;
TopFiveList.DataBind();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Atlas HoverMenuExtender</title>
<style type="text/css">
.popupMenu {background-color:Silver;position:absolute;visibility:hidden;border-width:1px;border-style:solid;border-color:Black;}
.popupHover {background-color:Gray;
</style>
</head>
<body>
<atlas:ScriptManager ID="scriptmgr" runat="server"></atlas:ScriptManager>
<form id="form1" runat="server">
<h2>Top 5 Mp3's</h2>
<div>
<asp:GridView ID="TopFiveList" ShowHeader="false" GridLines="Both" Width="200px" AutoGenerateColumns="False" runat="server">
<Columns>
<asp:BoundField Visible="false" DataField="Mp3Number" />
<asp:TemplateField>
<ItemTemplate>
<asp:Panel ID="HoverPnl" CssClass="popupMenu" Width="300px" runat="server" style="display:none">
<table>
<tr>
<td>
<b>Artist</b></td>
<td>
<asp:Label ID="ArtistLbl" Text='<%# Eval("Artist") %>' runat="server"></asp:Label></td>
</tr>
<tr>
<td>
<b>Song Title</b></td>
<td>
<asp:Label ID="Label1" Text='<%# Eval("SongTitle") %>' runat="server"></asp:Label></td>
</tr>
<tr>
<td>
<b>Song Rating</b></td>
<td>
<asp:Label ID="Label2" Text='<%# Eval("Rating") %>' runat="server"></asp:Label></td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID="GridRowPnl" Width="100%" runat="server">
<asp:Label ID="Label3" Text='<%# Eval("SongTitle") %>' runat="server"></asp:Label>
</asp:Panel>
<cc1:HoverMenuExtender ID="HoverMenuExtender1" runat="server">
<cc1:HoverMenuProperties PopupPosition="right" HoverCssClass="popupHover" PopupControlID="HoverPnl"
TargetControlID="GridRowPnl" PopDelay="50" />
</cc1:HoverMenuExtender>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
