I have created a menu
<asp:Menu ID="Name1" runat="server" OnMenuItemClick="DoSth_MenuItemClick" Visible="true">
<Items>
<asp:MenuItem Text="Function description" Value="Val" ToolTip="ToolTip description" meta:resourcekey="resourceKey">
</asp:MenuItem>
</Items>
</asp:Menu>
And now I want to enalbe/ disable dynamically MenuItem with JavaScript
I tried to do it with the following JavaScript function
function hideMenu() {
var menu = $get('<%=Name1.ClientID %>');
menu.getItems().getItem(0).set_enabled(false);
}
I got menu object however it is HTMLTalbeElement and then it fail in the second line.
Is there a way to do it?
I don't think you can disable a menu item.
As it rendered as anchor tag.
As I think you can set it to javascript:void(0);
You can set the css-class for your menu and submenu.
And use jquery to find the menu and set it's URL to javascript:void(0);
Related
I'm using a standard asp.net Menu control to display a menu on my page, and I have the text wrap option set to true. What I'd like to do is indent the wrapped text as a visual clue that its part of the line above.
I followed this question: Can you apply CSS only on text that is wrapped, i.e. the second and subsequent lines?
but I can't see how to format the MenuItem elements within the Menu control. Can this be referenced with CSS?
Not sure if this will help... but here is my html:
<asp:Menu ID="MSDSMenu" runat="server" Width="100%" CssClass="noPrint" ItemWrap="True">
<Items>
<asp:MenuItem Text="Search SDS" Value="Search MSDS" NavigateUrl="~/MSDS/SearchMSDS.aspx" />
<asp:MenuItem NavigateUrl="~/MSDS/ByDept.aspx?dept=Shipping%25%27%20OR%20UsageDept%20LIKE%20%27%25Receiving"
Text="Shipping / Receiving" Value="Shipping / Recieving" />
<asp:MenuItem NavigateUrl="~/MSDS/ByDept.aspx?dept=Other" Text="Other" Value="Other" />
</Items>
</asp:Menu>
There are several levels of styling on a menu:
<asp:Menu ID="Menu1" runat="server"
CssClass="menuBar_style" >
<LevelSubMenuStyles>
<asp:SubMenuStyle CssClass="sub_style_top" />
<asp:SubMenuStyle CssClass="sub_style_lvl1" />
</LevelSubMenuStyles>
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="item_style_top" />
<asp:MenuItemStyle CssClass="item_style_lvl1" />
</LevelMenuItemStyles>
<Items>
<asp:MenuItem />
<asp:MenuItem />
<asp:MenuItem />
</Items>
</asp:Menu>
there's the css for the Menu itself, but then you can also define LevelSubMenuStyles and LevelMenuItemStyles, with separate style items within both of those for each level of your menu (in your case only the one level by the looks of it).
I reccommend trying to apply your wrapping to the MenuItemStyle css as this affects the actual control (i.e. the text usually), SubMenuStyle affects the container around the control I think.
Hope that makes sense... it's awfully confusing business, your best bet is to play around with the different tags for a while until you get a feel for them in your own head and hopefully you'll see what I mean.
EDIT: I've just noticed this question is from two years ago! No idea how I ended up here, one minute I was browsing the latest questions and next... I'll leave the answer here in any case as menu styling has been a source of frustration for me in the past and this may help somebody else.
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 created a dropdownlist in my masterpage in which I can select a company. After a company is selected I get redirected, but what I'm looking for is a way to set this dropdownlist back to default value once another menu item is clicked from the navigation bar.
I created an event for the values of the menu.
Here is the code i'm using:
protected void MenuAdmin_MenuItemClick(object sender, MenuEventArgs e)
{
if (e.Item.Value == "Something")
{
DropDownListComp.SelectedValue = "-1";
Response.Redirect("~/test/test.aspx");
}
}
My menu has a menuItem which has the value Something.
<asp:Menu ID="MenuAdmin" runat="server" CssClass="menu"
EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal"
Visible="false" Font-Names="Verdana" onmenuitemclick="MenuAdmin_MenuItemClick">
<Items>
<asp:MenuItem Text="Something" Value="Something"/>
</asp:MenuItem>
</Items>
</asp:Menu>
The dropdownlist I created which has the value -1 in a listitem looks like this:
<asp:DropDownList ID="DropDownListComp" runat="server"
onselectedindexchanged="DropDownListComp_SelectedIndexChanged"
DataSourceID="SqlDataSourceComp" DataTextField="tCompName"
DataValueField="tCompId" AutoPostBack="true" AppendDataBoundItems="True">
<asp:ListItem Text="--Select company--" Value ="-1" Selected="False"></asp:ListItem>
</asp:DropDownList>
So I'm wondering why this isn't working. The menu does redirect but it doesn't put my dropdownlist back to --Select company--. I tried figuring it out with a breakpoint and when it runs through the if statement and it says that the value is -1. It's like my main page isn't updated, just the main content. So I think I have to do a post back or something in the event? Thank you for the help.
I saw on other website the same problem. They solved it using a button next to the dropdownlist which gets the value of the selectedValue from the dropdownlist and redirects.
Actually the same event is fired as when you select anything in the dropdownlist at the first time.
Regards.
I built a web application using ASP.NET Visual Studio 2010 with Master Pages. As you will see that the project gives us a default menu bar item. I have 5 pages (links) listed on those menu bars. Now when a user goes to a specific page I want to highlight that menu bar link. I dont know how to do that :(
I tried this on the Master Page Code Behind but it didnt work too:
foreach (MenuItem item in NavigationMenu.Items)
{
var navigateUrlParams = item.NavigateUrl.Split('/');
if (Request.Url.AbsoluteUri.IndexOf(navigateUrlParams[navigateUrlParams.Length - 1]) != -1)
{
item.Selected = true;
}
}
And in my mark up view I have this:
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" OnMenuItemClick="NavigationMenu_MenuItemClick">
<Items>
<asp:MenuItem Text="Test1"/>
<asp:MenuItem Text="Test2"/>
<asp:MenuItem Text="Test3"/>
</Items>
</asp:Menu>
</div>
So basically whenever user comes to Test1.aspx page, I want the menu item of Test1 to be highlighted. How should I do that?
Any help will be appreciated! Thank you...
Use CSS link classes to implement this:
http://www.w3schools.com/css/sel_active.asp
And unless you "need" to do something programmatic against these link items, use HTML anchor links instead. Create them as list items:
<ul class="menu">
<li>
Link 1
</li>
</ul>
What I'm saying is to question if controls are necessary here (not familiar with your project), and to keep the markup simple whenever possible.
First make sure that your menu items all have an Id property
In your master page code behind in the page Load handler do something like this
if (!Page.IsPostBack)
{
if(Page is Default)
liHome.Attributes["class"] += " active";
}
In this example you would check the "type" of the currently viewed page and append the to the class attribute for the currently navigated link. you could define a css property for active something like
.active
{
background-color: Red;
}