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.
Related
I am implementing IListServer. Everything works fine except GetTotalSummary. All examples that I've been able to find show the implementation of GetTotalSummary returning a Dictionary of items. In version 12, the interface for IListServer has changed and no longer returns a dictionary. Instead, it returns a List<objects>.
An example implementation of the interface is given here, but unfortunately the specific method that I need is not implemented.
I don't know how to fill this returning list so that I can see my records' count in grid footer. Any help is really appreciated :)
And here is my ascx for the dynamic grid I am filling:
<dx:ASPxGridView runat="server" Width="100%" ID="grdMain" ClientInstanceName="grid"
KeyFieldName="ID" AutoGenerateColumns="false" EnableRowsCache="false"
OnAutoFilterCellEditorCreate="grid_AutoFilterCellEditorCreate" OnAutoFilterCellEditorInitialize="grid_AutoFilterCellEditorInitialize" OnProcessColumnAutoFilter="grid_ProcessColumnAutoFilter">
<settingsbehavior allowfocusedrow="true" allowclienteventsonload="false" AllowGroup="false" autoexpandallgroups="true"
enablerowhottrack="True" columnresizemode="Control" />
<settings showverticalscrollbar="true" verticalscrollableheight="500" showgrouppanel="false"
showfilterrow="true" ShowHorizontalScrollBar="True" showfooter="True"/>
<styles>
<AlternatingRow Enabled="true" />
<Row Cursor="pointer" />
</styles>
<clientsideevents init="SGEntityListScript.OnInit" endcallback="SGEntityListScript.OnEndCallback" />
<SettingsBehavior EnableCustomizationWindow="true" />
<TotalSummary>
<dx:ASPxSummaryItem FieldName="ID" SummaryType="Count"/>
</TotalSummary>
</dx:ASPxGridView>
The last parameter of the IListServer.Apply method is the list of total summary descriptions requested by the control. Save them locally or immediately evaluate and save results. The GetTotalSummary method should return array of total summary values in the same order as they were requested in the Apply method.
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 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);
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"