I have a databound ASP.net menu with the following databindings
<DataBindings>
<asp:MenuItemBinding TextField="title" ToolTipField="description" NavigateUrlField="url" SelectableField="AsLink" />
</DataBindings>
Now any node which becomes non selectable also loses its arrow, even if it has children
Why is that and how can we remedy this?
I have seen some suggestions to use StaticEnableDefaultPopOutImage.
Neither should it, as its purpose is according to msdn
Gets or sets a value indicating whether the built-in image is displayed to indicate that a static menu item has a submenu
And my issue is equally with static and dynamic nodes, in case of non-selectability
I'm using .NET 4.0
The problem is that the Menu control adds a style on the static menu item anchor(<a>) element (style="cursor: text") when it is not selectable so you need to manully change it.
Change the Css for your Static Menu Style to make it easy to find the right anchor elements:
<StaticMenuStyle CssClass="StaticMenuHover" />
Add a Jquery script to the end of the page to change the pointer for the menu items:
//Grab all Static Menu anchors elements with an href of '#'(Non active links)
$(".StaticMenuHover a[href='#']").css("cursor","pointer");
Related
I added an asp:menu control (with a web.sitemap backend) to my app. For this particular app, when the user is not logged in, I don't want to show any menu items, but I do want the menu to have the same color as the bitmap header under it. However, when the menu is empty, I just end up with a blank rectangle. It's a static menu, 5 items, using CSS to style it. I've tried adding the background color to the menu, the staticmenu style, and the staticmenuitem style with no luck. Any ideas?
Why not wrap the menu control in a div to create a container that will always exist regardless and give it a background color?
i have a filter panel with 5-6 combo boxes ajax control tool kit..
i want this filter panel to be visible false by default.. and toggle it(show/hide) on client click using java script
however when i have my filter panel as visible = false runat=server java script does not get the object
and if i do code behind.. filterpanel.attributes.add("style",display:none)
filterpanel.attributes.add("style",visibilty:hidden)
the combo box throws a runtime error..
i've searched on the net which says.. combo box is difficult to render inside a panel.. whose default property is initially false!
The problem is that the <select> elements have to be rendered (but not necessarily visible) in order to reliably access their dimension properties.
So display: none; won't work because the elements are not rendered, and visibility: hidden; will partially work because the elements are rendered, so space is allocated for them on the page, but hidden, so that space will remain empty.
A third solution is to render the container as usual, but make it absolutely positioned outside of the browser viewport:
filterPanel.Attributes.Add("style",
"position: fixed; left: -10000px; top: -10000px;");
That way, the panel and its contents won't be visible, but the size of the <select> elements will be properly computed.
On the client side, the formula to show the panel becomes:
document.getElementById("filterPanelClientID").style.position = "static";
And to hide it again:
document.getElementById("filterPanelClientID").style.position = "fixed";
You can test a jQuery-based implementation here.
The issue is that if you set Visible="false" on a server control, it won't render any of the HTML elements, including the combo boxes. Hiding the panel using the following is AJAX friendly:
<asp:Panel id="p" runat="server" style="display:none">
</asp:Panel>
Which will render a DIV and all your drop downs, but hide them from view, allowing you to toggle the div's visibility.
Don't apply the "display: none" to the panel, only "visibility: hidden":
filterpanel.Attributes.Add("style", "visibilty: hidden");
This will hide your panel (the <div> I suppose) but reserve the required space (and therefore will allow the dimension-related properties of the corresponding DOM element to have the right values).
Of course you'll see an empty spot but you could probably resolve this issue by playing with the styles of an element (maybe by nesting the panel inside another element and by applying styles to that element instead of doing that on the panel itself).
Referring to Menu / Scrolling Example
I would like to create / find the same functionality for a vertical menu. I tried the following.
<asp:Menu ID="menuAccountMembers" runat="server" StaticSubMenuIndent="16px"
Visible="true" RenderingMode="Table"
ScrollDownImageUrl="~/Resources/scrolldown.jpg"
ScrollUpImageUrl="~/Resources/scrollup.jpg">
<Items>
But it doesnt display any scrolling images. I am using .net 4.0
Tried setting menuAccountMembers.RenderingCompatibility = new Version(3, 5); as well.
If there a property to only display the first 5 root menu items, then show scroll bars for the rest? It can be click-able, no need to hover over to show next item.
Found the Jcarousel sufficient
In an ASP.NET 2.0 application, I want to permit a user to select a MenuItem, even if the user does not click the actual text of the MenuItem, but instead only clicks the highlight area that ASP.NET places around the currently selected MenuItem (represented by the DynamicHoverStyle.BackColor property). Since the BackColor is displayed the same width for each MenuItem in a submenu, based on MenuItem with the longest text, I would like to make the hit-zone (clickable area) of each sub-MenuItem the same width (same at the BackColor area), regardless of how much text is displayed in the in each individual sub-MenuItem.
Here's the setup. I am using a Menu on a MasterPage to display a similar menu on each of my pages. Some of the pages suppress this menu, and some of them add addition MenuItems, sometimes to the top level, sometimes adding sub-MenuItems to an existing top-level MenuItem, and sometimes both (adding a MenuItem to the top level and then additional MenuItems as submenuitems to that newly added top level.
This menu has a horizontal orientation, and it is dynamic, in that only the top level is initially exposed, and the submenus are displayed when selected.
During usability testing, we noticed that users would select a top-level menu item to expose the submenu, and then select a submenu item, but not by necessarily clicking on the submenu item text, but instead clicking on the BackColor area of the submenu item. Since the text of some MenuItems are longer than others, MenuItems with short Text have a rather large BackColor area. When the user clicks on the BackColor area, but not directly on the MenuItem Text, nothing happens, since the user didn't actually click on the submenu item hit zone.
Although there are visual cues as to what part of the displayed MenuItem is clickable (the mouse pointer changes to a link cursor when the mouse is positioned on the MenuItem Text, but not when it is only hovering over the BackColor), this behavior confused the users. They highlighted a MenuItem, and clicked it, but nothing happened.
I would like to make clicking a MenuItem successful, even if the user did not click on the actual Text of the MenuItem, but simply click on the BackColor area.
It seems like there should be a property somewhere to control the width of the active area of the displayed MenuItems, but I do not see it. Any suggestions, given that I am creating some of these MenuItems at runtime?
Added css class:
.MenuClickArea {width: 100%; display: block;}
and assigned that class to the DynamicMenuItemStyle and StaticMenuItemStyle of the menu in question in the master page aspx
seems to do the trick.
I've got a horizontal menu with UL/LI markup that I want to convert to an ASP:Menu in .net 3.5.
I'd like choices in the submenu to be rendered in a horizontal menu below the main menu when the main menu option is clicked. I also want to:
indicate which menu option is chosen by highlighting/bolding both the main menu and submenu,
check on rendering (or via some other mechanism) the role of the user to show only the proper menu options.
Use the CSS friendly adapters: http://www.asp.net/CssAdapters/
These will allow you to keep the ul/li markup and give you the ability to highlight via css and control the rendering just like you would with a normal asp:Menu with the roles.