Tags: ajax, aspnet, control, created, disappearing, extender, gridview, header, hover, hovermenu, menu, net, sample, scroll, scrollable, website

HoverMenu with GridView - header disappearing

On .Net » ASP.NET AJAX

28,003 words with 3 Comments; publish: Sun, 06 Jan 2008 08:26:00 GMT; (10093.75, « »)

I have created a gridview control (scrollable) with a hover menu extender (like the one on the sample website). However, when you scroll down the header remains fixed (as it should as I've set it to in Css) until you mouse over any of the records to bring up the hover menu enabled popup panel. When this happens the header disappears completely and the only way to get it back is to scroll back up to the top (where there is now a gap where the header should be) and then mouse over any row. I can't understand why this happens, but it always disappears when you are scrolled further down and then mouse over any row. If you just scroll down and scroll back up to the top without mouse over any of the rows the header stays put as it should.

Here is my code: (by the way this is in the content of an accordion pane which works fine- so I already have AJAX enabled and the SCriptManager present)

<divclass="container"style="height: 370px; Width:auto">

<asp:GridViewID="grdExistingContacts"

runat="server"

AutoGenerateColumns="False"

DataKeyNames="CallLookupID"

DataSourceID="srcExistingContacts"

Width="100%"GridLines="None">

<Columns>

<asp:TemplateField>

<HeaderTemplate>

<tablewidth="100%">

<tr>

<tdwidth="30%">Name</td>

<tdwidth="30%">Number</td>

<tdwidth="25%">Group</td>

<tdwidth="15%">Personal?</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<asp:PanelCssClass="popupMenu"ID="PopupMenu"runat="server">

<divstyle="border:1px outset white;padding:2px;">

<div><asp:LinkButtonID="lnkEdit"runat="server"CommandName="Edit"Text="Edit"/></div>

<div><asp:LinkButtonID="lnkDelete"runat="server"CommandName="Delete"Text="Delete"/></div>

</div>

</asp:Panel>

<asp:PanelID="Panel9"runat="server">

<tablewidth="100%">

<tr>

<tdwidth="30%"><asp:LabelID="Label1"runat="server"

Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("DestinationName"))) %>'/></td>

<tdwidth="30%"><asp:LabelID="Label2"runat="server"

Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("DestinationNumber"))) %>'/></td>

<tdwidth="25%"><asp:LabelID="Label3"runat="server"

Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("PersonalGroup"))) %>'/></td>

<tdwidth="15%"><asp:CheckBoxEnabled="false"ID="CheckBoxPersonal"runat="server"Checked='<%# Eval("Personal") %>'/></td>

</tr>

</table>

</asp:Panel>

<cc1:HoverMenuExtenderID="hme2"runat="Server"

HoverCssClass="popupHover"

PopupControlID="PopupMenu"

PopupPosition="Left"

TargetControlID="Panel9"

PopDelay="100"/>

</ItemTemplate>

<EditItemTemplate>

<asp:PanelID="Panel9"runat="server"Width="100%">

<tablewidth="100%">

<tr>

<tdwidth="30%"><asp:TextBoxFont-Bold="true"ID="TextBox1"runat="server"

Text='<%# Bind("DestinationName") %>'/></td>

<tdwidth="30%"><asp:TextBoxID="TextBox2"runat="server"

Text='<%# Bind("DestinationNumber") %>'/></td>

<tdwidth="25%"><asp:TextBoxID="TextBox3"runat="server"

Text='<%# Bind("PersonalGroup") %>'/></td>

<tdwidth="15%"><asp:CheckBoxID="CheckBoxPersonalEnabled"runat="server"

Checked='<%# Bind("Personal") %>'/></td>

</tr>

</table>

</asp:Panel>

<cc1:HoverMenuExtenderID="hme1"runat="Server"

TargetControlID="Panel9"

PopupControlID="PopupMenu"

HoverCssClass="popupHover"

PopupPosition="Left"/>

<asp:PanelID="PopupMenu"runat="server"CssClass="popupMenu"Width="80">

<divstyle="border:1px outset white">

<asp:LinkButtonID="lnkUpdate"runat="server"

CausesValidation="True"CommandName="Update"Text="Update"/>

<br/>

<asp:LinkButtonID="lnkCancel"runat="server"

CausesValidation="False"CommandName="Cancel"Text="Cancel"/>

</div>

</asp:Panel>

</EditItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView></div>

All Comments

Leave a comment...

  • 3 Comments
    • Anyone got any light to shed?

      #1; Sun, 06 Jan 2008 08:27:00 GMT
    • Can anyone please help, it seems like this problem is being ignored.

      I have some further developments in a similar problem I have now encountered.

      I have a tabContainer control which also contains a scrollable gridview like the one with the hovermenu described above. The header has a css style that 'freezes' it so that when you scroll down, the header is still viewable like above also. Now this gridview (which is on the second tab of the tabContainer) when it is being viewed as the active tab it looks fine, except when you mouse over either of the tab headers, at which point the whole grid view shoots miles down the page causing the whole page to scroll. The only way you can get it back to it's normal position is by resizing the window.

      That is this new problem I have encountered. If you could help me out thzt would be great.

      To expand on my previous problem (which I didn't explain well):

      I have a scrollable gridview control contained within an accordion pane. It is constructed using a template field of a panel control. When you mouse over this panel, it brings up a PopUp panel (another AJAX control) to allow you to click edit and highlights that current row. The header has Css applied to it so that it is 'frozen' so that when you scrow down it remains visible to continue corresponding to the rows below. When you scroll down the page and then mouse over any row, the header disappears. The only way I have found to get it back, is to scroll back all the way to the top and then re-mouse over any row in view when scrolled as near to the top as possible.

      Please...this is a really annoying problem. It may not be related to the AJAX controls at all. But it hasn't happenned anywhere else yet!

      Your help is appreciated

      #2; Sun, 06 Jan 2008 08:28:00 GMT
    • I have some more information. The bug seems to have nothing to do with my freezing Css. I have just tested it and it shifts the gridview down the page, regardless of the header being frozen or the gridview being scrollable for that matter. It seems to me that it shoots it down the page (causing the whole page to display vertical scroll bars) to the length it would take if all the rows were displayed without being contained within a div tag restricting it's height.

      This is only an idea. Hope this helps you identify my problem

      #3; Sun, 06 Jan 2008 08:29:00 GMT