asp:menu and AJAX Updatepanel
This is REALLY strange! I have an asp:menu. Leaving it outside updatepanel the functionality is fine
I put this into an updatepanel. Then the functionality for dynamichover works ok until the first postback. After that the dynamichover is not set, but when you click the menu it is working fine, the active link is working.
Can someone please help me in this? It is the attribute with the "purple" that fails.
Thanks in advance.
I have tried several hacks and bug fixes without any luck, so please post code.
Code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="UpdatePanel.aspx.vb" Inherits="UpdatePanel" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<tr>
<td>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel runat="server" id="UpdatePanel" updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="UpdateButton2" eventname="Click" />
</Triggers>
<ContentTemplate>
<asp:Label runat="server" id="DateTimeLabel1" />
<asp:Button runat="server" id="UpdateButton1" onclick="UpdateButton_Click" text="UpdateØverst" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" id="UpdatePanel1" updatemode="Conditional">
<ContentTemplate>
<asp:Label runat="server" id="DateTimeLabel2" />
<asp:Button runat="server" id="UpdateButton2" onclick="UpdateButton_Click" text="UpdateNederst" />
<asp:Menu ID="Menu1" runat="server" BackColor="White" Font-Bold="True"
Font-Names="Arial" Font-Size="8pt" ForeColor="White" Orientation="Horizontal"
StaticSubMenuIndent="" Style="border-right: gray 1px solid; border-top: gray 1px solid;
font-size: 10pt; text-transform: none; border-left: gray 1px solid; cursor: hand;
text-indent: 10pt; border-bottom: gray 1px solid; font-family: Arial; background-color: lavender">
<StaticMenuItemStyle BackColor="#0082d1" HorizontalPadding="1px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="purple" Font-Names="Arial" ForeColor="White" />
<DynamicMenuStyle BackColor="#F7F6F3" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />
<StaticSelectedStyle BackColor="#054798" ForeColor="White" />
<DynamicSelectedStyle BackColor="#054798" ForeColor="white" Font-Size="8pt" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" ForeColor="#696969" />
<StaticHoverStyle BackColor="Navy" ForeColor="White" />
<Items>
<asp:MenuItem Text="Test1" Value="1-1">
<asp:MenuItem Text="Along pipe" Value="1-1"></asp:MenuItem>
<asp:MenuItem Text="Over fittings" Value="1-2"></asp:MenuItem>
<asp:MenuItem Text="Over valves" Value="1-3"></asp:MenuItem>
<asp:MenuItem Text="Network calculation" Value="1-4"></asp:MenuItem>
<asp:MenuItem Text="Comparison" Value="1-5"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="test2" Value="2-1">
<asp:MenuItem Text="Condensation or not" Value="2-1"></asp:MenuItem>
<asp:MenuItem Text="Minimum insulation thickness" Value="2-2"></asp:MenuItem>
<asp:MenuItem Text="Humidity guideline values" Value="2-3"></asp:MenuItem>
<asp:MenuItem Text="Comparison" Value="2-4"></asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>
</ContentTemplate>
</asp:UpdatePanel>
</td>
<td>
</td>
</tr>
</div>
</form>
</body>
</html>
My only code for code behind is:
Code:
Partial Class UpdatePanel
Inherits System.Web.UI.Page
Protected Sub menu1_MenuItemClick(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.MenuEventArgs) Handles Menu1.MenuItemClick
DateTimeLabel1.Text = Menu1.SelectedItem.Value 'DateTime.Now.ToString()
DateTimeLabel2.Text = Menu1.SelectedItem.Text 'DateTime.Now.ToString()
End Sub
End Class
Re: asp:menu and AJAX Updatepanel
I have seen something vaguely like this, but quite different, but the solution might be similar. When using a jQuery plugin to create a nice dropdownlist it works fine, but when placed inside an updatepanel, it stoped working on the first postback. My solution is to reregister the javascript responsible for required action using:
Code:
ScriptManager.RegisterStartupScript
You have to check the generated HTML and find the name of the script. It is a nasty trick, but it helped me.
If you are interested, I've written a small blog-post about this problem, it might lead you to the solution.
If you have any futher question, just ask
Re: asp:menu and AJAX Updatepanel
Thank you very much for your reply!
I have done something before with scriptmanager.register but for this example, what should I put into that? Plaese try have a look at my code and download it and try. It is very easy and then you can see the issue.
Delele the Updatebutton_click, then all will work.
Thanks in advance
Re: asp:menu and AJAX Updatepanel
You should check the generated HTML. You should examine the javascript function and find the one that is responseble for the dynamichover, that function you need to "re-re
Re: asp:menu and AJAX Updatepanel
I have now investigated the source code for the generated page. I think this must be the code for the hover menu:
Code:
onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n8"
I am now trying to add this to the page_load event:
Code:
ScriptManager.RegisterStartupScript(Me, [GetType](), "Menu_HoverDynamic(this)", "Menu_HoverDynamic(this);", True)
But it doesn't work, so there must be something wrong, could someone help in getting the right syntax in this?
Thanks!!!
Re: asp:menu and AJAX Updatepanel
I think you need the <script> tag around then script
Re: asp:menu and AJAX Updatepanel
I am not sure I understand, do you mean like this?
Code:
ScriptManager.RegisterStartupScript(Me, [GetType](), "<Script>Menu_HoverDynamic(this)</Script>", "<Script>Menu_HoverDynamic(this);</Script>", True)
