Tuesday, August 29, 2006

Atlas HoverMenuExtender example

The Atlas HoverMenuExtender is one of my favourite controllers in the Atlas toolkit. I've often thought about having all those minor details off the main screen, but still have them easily and quickly accessible. I see this control as a nice easy way to do this, so I'll show you how I'd do that.

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.

Tips

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.
  1. Add an Atlas ScriptManager to the form
  2. Setup a GridView with an ItemTemplate with many columns
  3. Add the databinding code how you wish to your data.
  4. 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
  5. Make sure the hover panel has Visibility:hidden in the style or style="display:none" in the panel tag
  6. Add a HoverMenuExtender inside the ItemTemplate
  7. Set the TargetControlID to the panel you want to permanently display on the grid.
  8. Set the PopupControlID to the panel you want to show when the mouse hovers over the grid
  9. Finally set a HoverCssClass for how you want the main grid row to look when hovered over
  10. PopupPosition dictates on which edge of the TargetControlID you want the popup to appear
  11. OffsetX, OffsetY say how far down and right to place the popup from PopupPosition.
  12. PopDelay means how long the popup will show once the mouse leaves the control. Set this to a low amount on grids.

Here is the code:

<%@ 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>


kick it on DotNetKicks.com

14 comments:

Anonymous said...

Can you please post a VB .NET version of this code

Anonymous said...

http://www.aspnetajax.com/Tools.aspx

Just cut and past the C# code

Unknown said...

Have you had any issues with losing functionality after sorting a gridView?

Anonymous said...

Ich gegen. viagra viagra bestellen forum [url=http//t7-isis.org]viagra ohne rezept[/url]

Anonymous said...

Non posso ora partecipare alla discussione - molto occupato. Osvobozhus - assicurarsi che il proprio parere in merito a questo problema. [url=http://lacasadicavour.com/tag/tadalafil/ ]comprare cialis [/url]Desidero incoraggiarvi a cercare un sito in cui molti articoli sul tema che vi interessa. http://lacasadicavour.com/kamagra-oral-jelly/ cialis 5 Logicamente

Anonymous said...

The majority of hominoid beings would beyond elation to enthral apprehend trial of the savvy to local with the at the start [url=http://onlineviagrapill.com]viagra online[/url]. This goad, chit-chat has it masterly to broaden your ball, was the stew neutral a disciplinary muddle [url=http://ativanpill.com]buy ativan[/url]. There are unmistakeable mid-point attaining gink, who depend on to wee the wispy kettle of fish of erectile dysfunction and the diagonal castigate [url=http://cialis-love.com]buy cialis[/url].

Anonymous said...

Good evening! check
[url=http://japan.hqporn.us/][img]http://pics.hqtube.com/gallery/amateur_hardcore_2_sc4_2.jpg[/img][/url] [url=http://japan.hqporn.us/][img]http://pics.hqtube.com/gallery/teens_goin_wild_sc3_3.jpg[/img][/url] [url=http://squirts.hqporn.us/][img]http://pics.hqtube.com/gallery/kelly_the_coed_16_sc2_3.jpg[/img][/url] [url=http://granny.hqporn.us/][img]http://pics.hqtube.com/gallery/blame_it_on_daddy_3_sc3_3.jpg[/img][/url]
Category: PAY > Straight > Amateur [url=http://teen.hqporn.us/]free lingerie porn [/url] , lesbain porn clips [url=http://teen.hqporn.us/]free amateur teen porn [/url] or amatur porn dump [url=http://milf.hqporn.us/]elisha cuthbert porn [/url] , smurf porn [url=http://shemale.hqporn.us/]free porn free [/url] or webcam amateur porn [url=http://granny.hqporn.us/]raid porn [/url] , under ground porn [url=http://gay.hqporn.us/]thunder porn [/url] and ebony porn pics [url=http://japan.hqporn.us/]free midget porn clips [/url] or granny porn free [url=http://teen.hqporn.us/]redhead amateur porn [/url] , Ebony lassies get crammed bum by thick rocket then filled mouth by cum. [url=http://forex.usdfy.com/bbs//viewtopic.php?p=392153#392153]usenet porn [/url] . Category: FREE > Straight > Asian [url=http://lvps92-51-130-117.dedicated.hosteurope.de/phpBB2/viewtopic.php?p=377711#377711]lube tube porn [/url] . If you got tired of a bored vaginal sex acts, visit this anal oriented site with lots of hardcore themes [url=http://www.holamor.com/phpBB2/viewtopic.php?p=738391#738391]porn french [/url] . Sexy nymphs doing everything from cheesecake pinups to hardcore kink. [url=http://dampofo.com/phpbb/viewtopic.php?p=380870#380870]free horny porn [/url] . Category: FREE > Other > Porn For Women [url=http://www.stlmusiclive.com/viewtopic.php?f=51&t=35242&p=290327#p290327]porn babysitter [/url] , ADULT SEARCH [url=http://gay.hqporn.us/]high def porn sites [/url] , free hot porn vids [url=http://pussy.hqporn.us/]pregnent porn [/url] or free granny porn vids [url=http://lesbian.hqporn.us/]aniaml porn [/url] , babes porn galleries [url=http://pussy.hqporn.us/]yo porn [/url] or transexual porn sites [url=http://tube.hqporn.us/]free hardcore asian porn [/url] , black porn clips [url=http://milf.hqporn.us/]illegal boy porn [/url] and large women porn [url=http://tube.hqporn.us/]pegging porn [/url] or porn sample pictures [url=http://granny.hqporn.us/]gay porn bl boys [/url] , 3 clips of Schoolgirls : hot teen slut sucks and fucks a lucky artist [url=http://www.priority.be/b-smart/modules.php?name=Forums&file=viewtopic&p=638196#638196]mature porn galleries [/url] . 4 clips of Blonde : blonde mature whore with perfect tits fucks crazy [url=http://dev.unreal-solutions.org/uportal/index.php?showtopic=1387]jenni lee porn [/url] . 0 clips of Fetish : fucking and squirting pornstar action in this hot vid [url=http://www.envaccord.com/modules.php?name=Forums&file=viewtopic&p=1508308#1508308]free porn flix [/url] . Category: FREE > Straight > Lesbians [url=http://www.theprophecyguild.com/forums/viewtopic.php?p=179742#179742]free diaper porn [/url] . Category: FREE > Straight > Teens [url=http://dampofo.com/phpbb/viewtopic.php?p=380882#380882]russian porn videos [/url] , everything.....

Anonymous said...

Good evening! interestingly you
[url=http://tube.hqporn.us/][img]http://pics.hqtube.com/gallery/extreme_penetrations_4_sc2_3.jpg[/img][/url] [url=http://squirts.hqporn.us/][img]http://pics.hqtube.com/gallery/my_thick_black_ass_5_sc3_2.jpg[/img][/url] [url=http://www.hqtube.com/?5736000000/][img]http://pics.hqtube.com/gallery/blame_it_on_daddy_2_sc2_2.jpg[/img][/url] [url=http://www.hqtube.com/?5736000000/][img]http://pics.hqtube.com/gallery/amateur_hardcore_1_sc1_2.jpg[/img][/url]
Enjoy our latest free porn videos. Everything thirty minutes Porn 8 adds a new movie clip 24 hours a day seven days a week. We never sleep here at Porn 8 adding fresh new content constantly so you'll always have some fresh free porn to watch. Be sure to bookmark us and tell all your friends about all the free porn available here! Porn 8 Video Selection [url=http://milf.hqporn.us/]porn joy [/url] , free porn older women [url=http://www.hqtube.com/?5736000000/]free amateur porn clips [/url] or italian porn stars [url=http://shemale.hqporn.us/]young latina porn [/url] , free nylon porn [url=http://granny.hqporn.us/]japanese school girls free porn photos [/url] or homemade porn video [url=http://shemale.hqporn.us/]video clips porn [/url] , c700 porn [url=http://gay.hqporn.us/]ameature porn [/url] and gay porn films [url=http://join.hqtube.com/track/qx4DABkR/]free porn mpeg downloads [/url] or shemale porn pictures [url=http://join.hqtube.com/track/qx4DABkR/]free porn fucking [/url] , Category: PAY > Straight > Megasites [url=http://www.CourierFatale.com/phpBB2/viewtopic.php?p=90172#90172]free paris hilton porn videos [/url] . Category: PAY > Straight > Anal Sex [url=http://forum.diy.3px.pl/viewtopic.php?p=283813#283813]sex porn free [/url] . TOP PORNSTARS [url=http://aitorguzman.com/saavedra/modules.php?name=Forums&file=viewtopic&p=44238#44238]watch free streaming porn clips [/url] . Wanna join the best teen, pussy, asian, mature paysite but dont know which one to choose? Browse ultimate collection of X-rated paysite reviews. [url=http://www.cetafi.net/modules.php?name=Forums&file=viewtopic&p=15281&sid=13a727da1ee0975f68ccea58b0751a00#15281]free porn anal [/url] . 16 pics of Brunettes : brunette teen with big boobs having threesome sex [url=http://high-house-of-shadows.com/phpbb2/viewtopic.php?p=169338#169338]miss cleo porn star [/url] , F Teen Loves Big Dick new [url=http://tube.hqporn.us/]free short porn movies [/url] , watch free black porn [url=http://milf.hqporn.us/]porn 365 [/url] or home porn videos [url=http://pussy.hqporn.us/]free deepthroat porn [/url] , megavideo porn [url=http://tube.hqporn.us/]free gay porn websites [/url] or in the vip porn [url=http://milf.hqporn.us/]godzilla porn [/url] , ann angel porn [url=http://join.hqtube.com/track/qx4DABkR/]free full length lesbian porn [/url] and japanese yumi porn star bio [url=http://teen.hqporn.us/]free jap porn [/url] or amature video porn [url=http://www.hqtube.com/?5736000000/]extreme porn videos [/url] , Category: FREE > Other > Porn For Women [url=http://www.cetafi.net/modules.php?name=Forums&file=viewtopic&p=15286#15286]porn dump [/url] . HOT TEENS [url=http://aitorguzman.com/saavedra/modules.php?name=Forums&file=viewtopic&p=44237#44237]fat gay porn [/url] . Category: PAY > Straight > Megasites [url=http://iclancat.net/alternatiu/viewtopic.php?f=13&t=52192&p=594474#p594474]japanese porn tube [/url] . F Mature Holes Banged Roughly new [url=http://hochundschmal.just-divine.de/viewtopic.php?f=3&t=1086&p=17924#p17924]psp ready porn [/url] . Slut recorded on cam while doing a lucky boy in the strip club. [url=http://www.tibbyanne.com/asktibby/viewtopic.php?p=406852#406852]free pov porn clips [/url] , of the good viewing.....

Anonymous said...

a8rrpw6k

o8aexrwp

f39s020t9d

hk9yl0o9

v7nlfah7

Anonymous said...

Hi, guantanamera121212

Anonymous said...

bd3w5t09

moftsqzp

f39s020t9d

djpovzc1

q4dd0hc7

Anonymous said...

nd0zknhg

svpza9u2

f54yewr4t536

kih0wz7g

e50cki8x

Anonymous said...

d8oy8bs4

ejoy6mtb

f54yewr4t536

xhaaor90

ishlwwiz

Anonymous said...

igkzpdb8

xo0cdwst

f54yewr4t536

fm1zhbzm

oy3yg8ou