asp:menu and AJAX Updatepanel

**hpl** · Aug 29th, 2012, 07:47 AM

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

**Lightning** · Aug 29th, 2012, 02:39 PM

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

**hpl** · Aug 30th, 2012, 01:41 AM

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

**Lightning** · Aug 31st, 2012, 02:53 PM

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

**hpl** · Sep 6th, 2012, 02:29 PM

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!!!

**Lightning** · Sep 7th, 2012, 02:38 PM

I think you need the <script> tag around then script

**hpl** · Sep 10th, 2012, 01:53 AM

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)

Thread: asp:menu and AJAX Updatepanel

Thread Tools

Display

asp:menu and AJAX Updatepanel

Re: asp:menu and AJAX Updatepanel

Re: asp:menu and AJAX Updatepanel

Re: asp:menu and AJAX Updatepanel

Re: asp:menu and AJAX Updatepanel

Re: asp:menu and AJAX Updatepanel

Re: asp:menu and AJAX Updatepanel

Posting Permissions