I have a asp:menu that stops functioning after I perform a search on my page. The search uses a update panel and is triggered by a submit button. Once the results are displayed on the page the menu hover effects stop working. It will no longer expand down on mouseover. The clickable links still work.
The menu is in the site's master page and is outside the update panel of the search control.
Thank you for any help!
This is the menu
<asp:Menu ID="Menu5" runat="server"
DynamicEnableDefaultPopOutImage="False"
Orientation="Horizontal"
RenderingMode="List"
StaticEnableDefaultPopOutImage="False"
StaticPopOutImageUrl="~/Images/DownArrow.png"
Visible="False" Font-Bold="False" ForeColor="Black">
<Items>
<asp:MenuItem PopOutImageUrl="~/Images/bullet.png" Selectable="False" Text="Add" >
<asp:MenuItem Text="Item" NavigateUrl="~/Admin/CreateItem.aspx" ></asp:MenuItem>
<asp:MenuItem Text="Contact" NavigateUrl="~/Admin/CreateContact.aspx" ></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Update" Selectable="False" Value="Update">
<asp:MenuItem Text="Item" NavigateUrl="~/Admin/UpdateItem.aspx" Value="Item"></asp:MenuItem>
<asp:MenuItem Text="Contact" NavigateUrl="~/Admin/UpdateContact.aspx" Value="Contact"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Approve" Selectable="False" Value="Approve" >
<asp:MenuItem Text="Item" NavigateUrl="~/Admin/ApproveItem.aspx" Value="Item"></asp:MenuItem>
<asp:MenuItem Text="Contact" NavigateUrl="~/Admin/ApproveContact.aspx" Value="Contact"></asp:MenuItem>
</asp:MenuItem>
</Items>
<StaticMenuItemStyle HorizontalPadding="10px" />
</asp:Menu>
This is the Button Click event
protected void btnSubmit_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
string keyword = txtSearch.Text.Trim();
List<dynamic> results = SearchItems(keyword);
List<dynamic> Cresults = SearchContacts(keyword);
//bind and return
lv.DataSource = results;
lv.DataBind();
//Contact Bind return
LVC.DataSource = Cresults;
LVC.DataBind();
}
}
My solution is not to use the drag and drop menus from VS 2012. I replaced this with a Jquery Menu that wrote and have had no issues since.
Related
asp.net-4.5 , Visual-Studio-2013 , Win7.
Reproduced the problem on a minimized project : empty web application with 1 web-form with Dir=rtl (right-to-left) and a Menu control.
Works fine but the arrows are on the right side and I need them on the left side.
Here is what I get:
And this is what I need (I used Paint to make this image) :
There's a solution for this circulating around here but it's for asp.net-2.0. Not working for 4.5.
My code:
<%# Page Language="C#" CodeBehind="WebForm1.aspx.cs" Inherits="Arrow_RTL_in_Menu.WebForm1" %>
<!DOCTYPE html>
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title></head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu ID="Menu1" runat="server"
StaticPopOutImageUrl="~/Images/Left_Arrow.gif"
DynamicPopOutImageUrl="~/Images/Left_Arrow.gif">
<Items>
<asp:MenuItem Text="AAA" Value="AAA" NavigateUrl="~/Default.aspx">
<asp:MenuItem Text="AAA-1" Value="AAA-1" NavigateUrl="~/Default.aspx"></asp:MenuItem>
<asp:MenuItem Text="AAA-2" Value="AAA-2" NavigateUrl="~/Default.aspx"></asp:MenuItem>
<asp:MenuItem Text="AAA-3" Value="AAA-3" NavigateUrl="~/Default.aspx"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="BBB" Value="BBB" NavigateUrl="~/Default.aspx">
<asp:MenuItem Text="BBB-1" Value="BBB-1" NavigateUrl="~/Default.aspx">
<asp:MenuItem Text="BBB-1-1" Value="BBB-1-1" NavigateUrl="~/Default.aspx"></asp:MenuItem>
<asp:MenuItem Text="BBB-1-2" Value="BBB-1-2" NavigateUrl="~/Default.aspx"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="BBB-2" Value="BBB-2" NavigateUrl="~/Default.aspx"></asp:MenuItem>
<asp:MenuItem Text="BBB-3" Value="BBB-3" NavigateUrl="~/Default.aspx"></asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>
</div>
</form>
</body>
</html>
Any idea where to start looking would be very much appreciated! Thank you!
Got the answer in another forum :
In the menu properties list, under the "Layout" category", I changed the RenderingMode property to "Table".
My code now (where the change was made) :
<asp:Menu ID="Menu1" runat="server"
StaticPopOutImageUrl="~/Images/Left_Arrow.gif"
DynamicPopOutImageUrl="~/Images/Left_Arrow.gif" RenderingMode="Table">
<Items> .........
Works beautifully!!!
Gadi
Hi I am trying to replace my ascii arrow with an image of an arrow to show that there is a submenu. I know how to put an image on the left of the text but cannot see how to put an image on the right. I have tried googling this and am out of luck.
Code:
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"
EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/PrizeRedemption.aspx" Text="Prize Issuance">
<asp:MenuItem Text="Issue Bounty Prizes" NavigateUrl="~/IssueBountyPrize.aspx"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Administration"
Value="Administration" Selectable="False">
<asp:MenuItem Text="Users" Value="Users" NavigateUrl="~/Admin.aspx?mode=users"></asp:MenuItem>
<asp:MenuItem Text="Prizes" Value="Prizes" NavigateUrl="~/Admin.aspx?mode=prizes"></asp:MenuItem>
<asp:MenuItem Text="Tournaments >" Value="Tournaments" NavigateUrl="~/IssuePrizes.aspx">
<asp:MenuItem Text="Tournament Templates" Value="Tournament Templates" NavigateUrl="~/TournamentTemplates.aspx">
</asp:MenuItem>
</asp:MenuItem>
I would probably add a class to the MenuItem. Then use CSS background-position to position your image in the correct location.
Read CSS background-position documentation for more information.
I has use ASP.Net menu control in master page. And I wrap the Maincontent using update panel. When postback is happen, the sub menu in master page not showing when mouse over. I need click again the menu then mouseover the menu the sub menu only show.
Master page
<div class="float-right">
<nav>
<asp:Menu ID="mne" runat="server" Orientation="Horizontal" Font-Names="Arial, Verdana, Tahoma"
OnMenuItemClick="mne_MenuItemClick" StaticEnableDefaultPopOutImage="false" Width="510px"
DynamicHorizontalOffset="20" StaticSubMenuIndent="250px" TabIndex="1" >
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="level1" HorizontalPadding="10px" />
</LevelMenuItemStyles>
<StaticMenuStyle />
<DynamicMenuStyle />
<StaticHoverStyle BackColor="Wheat" />
<DynamicHoverStyle BackColor="Gray" ForeColor="White" />
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"
Value="Home"></asp:MenuItem>
<asp:MenuItem Text="Management" Value="Management"
ToolTip="Management">
<asp:MenuItem Text="Edit" Value="Edit" ToolTip="Edit
NavigateUrl="~/Edit.aspx">
</asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Logout" Value="Logout"></asp:MenuItem>
</Items>
</asp:Menu>
</nav>
</div>
</div>
</header>
Edit.aspx
<asp:DropDownList ID="Country" runat="server" AutoPostBack="true" OnSelectedIndexChanged="Country_SelectedIndexChanged">
</asp:DropDownList>
After the drop down list postback, mouseover the menu, the submenu not showing. I need click on the menu then mouseover the submenu will display.
Anything is go wrong? Please help
I've also been experiencing this intermittently, and none of the other suggestions worked for me. I eventually decided to rem out every line of server-side code and then un-rem them section by section until I discovered what was causing it.
Turns out that it was as a result of server-side JavaScript injection using the ClientScript.RegisterStartupScript(...) method. In certain cases, the client-side objects referred to in the injected JavaScript were not visible at the time the script was injected. Others have hinted at page life-cycle being the root cause of this problem, and this would bear it out.
Once I'd discovered this, I was able to fix it quite easily by making sure that the script checked for visibility of document elements before referencing them. The surprising thing was that, despite having JavaScript warnings enabled, this did not generate any client-side errors.
Disable postback of root or parent menu:
MenuItem mnu = new MenuItem();
// if mnu has sub item(s)
mnu.Selectable = false;
this option is more useful when application opened by a mobile device.
I have this asp:menu with a few items and want to be able to set an item as active when I've clicked it.
Here it goes
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/pages/page_a.aspx" Text="PageA" />
<asp:MenuItem NavigateUrl="~/pages/page_b.aspx" Text="PageB" />
<asp:MenuItem NavigateUrl="~/pages/page_c.aspx" Text="PageC" />
</Items>
</asp:Menu>
This renders a menu looking something like this
PageA PageB PageC
When clicking something like PageB I'd like to be able to style it somehow, like adding a css or whatever returning this
PageA PageB PageC
Any advices where I can find some info or samples?
You can apply a CSS class or styles to a menu item using the 'selectedstyle' properties of the asp:Menu control, using syntax like this:
<staticselectedstyle backcolor=LightBlue
borderstyle="Solid"
bordercolor="Black"
borderwidth="1"/>
A more full example is described in this MSDN article.
EDIT in response to comment:
There is also the 'dynamicselectedstyle' property for dynamic menus which used the same syntax:
<dynamicselectedstyle backcolor=LightBlue
borderstyle="Solid"
bordercolor="Black"
borderwidth="1"/>
I have a menu control inside of an updatepanel. When I hover over a selected item, and then move back off of it, the css class gets set to staticSubMenuItem instead of staticSubMenuItemSelected. Is there a fix for this?
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Menu ID="SubMenu" runat="server" SkinID="subMenu" OnMenuItemClick="SubMenu_Click"
CssClass="floatRight" StaticMenuItemStyle-CssClass="staticSubMenuItem" StaticSelectedStyle-CssClass="staticSubMenuItemSelected"
StaticHoverStyle-CssClass="staticSubMenuItemSelected">
<Items>
<asp:MenuItem Text="Item 1" Value="0" Selected="true" />
<asp:MenuItem Text="Item 2" Value="1" />
</Items>
</asp:Menu>
</ContentTemplate>
</asp:UpdatePanel>
The problem is here:
StaticSelectedStyle-CssClass="staticSubMenuItemSelected"
StaticHoverStyle-CssClass="staticSubMenuItemSelected"
If you have a different CssClass set for Selected and Hover, the problem is fixed. Create a "Hover" css class and change the above to:
StaticSelectedStyle-CssClass="staticSubMenuItemSelected"
StaticHoverStyle-CssClass="staticSubMenuItemHover"