I am trying to replace an UltraWebMenu with a WebDataMenu. My menu is in a user control. Standard menu across the top with drop downs. The UltraWebMenu drop downs show fine. With the WebDataMenu they do not show. What I have discovered is that if I set the height of the WebDatMenu really big then then drop-down items do drop-down and display in the menu area. Of course that covers up the page so is not a solution. It is probably something simple but I've not found it. The menu is in a row of a table but taking it out and putting it above the table makes no difference.
Also using an XML source, as I am, I can't see how to format the menu items. I am not using Themes.
Hello nickhoare,
I was unable to reproduce your scenario exactly, because you did not provide me the code of your user control.
However I have created a simplified example based on your information. In that example the “WebDataMenu” is inserted in table and populated with static data. The menu is working as expected, but it’s not inserted in your user control. If you want, you can try to modify this example to represent the behavior of your application, or send me your own example.
You can download example from here - http://community.infragistics.com/members/AEftimov/files/Samples/WebDataMenu-_2D00_-nickhoare.zip.aspx
You can format menu items by overriding the default styles in your .aspx page (see the attached example):
<style type="text/css">
.igdm_ControlHorizontal
{
cursor: default;
float:left;
white-space: nowrap;
font-family: Segoe UI,Arial,Lucida Grande,Lucida Sans Unicode,Lucida,Helvetica,Sans-serif;
background-image: none;
background-repeat: repeat-x;
background-position: top;
background-color: #5BBDC1;
border: 0px none;
}
Or you can define your own styles (again in .aspx page):
.myStyle
width: 100%;
And then add them as item “CssClass” attribute by providing the name of the class (“myStyle” in above example).
I am looking forward to hearing from you.
Also can you tell me where the style names, you have used, are documented?
Well I thought all was OK. Until I went back to IE. The drop downs don't work there. No absolute positioning. The drop-downs work in Firefox and Safari.
Example attached although you could just try the last one
Please let me know if you need any further assistance regarding your questions.
I have investigated your sample further and I found that fast menu items closing may be caused by too low “ClosingDelay” property value.
I have tested your example with Firefox and when “SubMenuClosingDelay” (located in “Appearance” tab of Visual Studio Properties window) option is set to “0” or other low value it was really hard to choose item from menu. When I changed the “SubMenuClosingDelay” value to “100” the submenu was easy accessible again.
The default height is set for the items by default in order to provide starting functionality for the control if user forgets to set the height (this will lead to wrong rendering of the control if height is set to “0” for example). You can change the height of the menu items anytime to match your needs.
Please let me know if you need further assistance.
The code generates the height of the element. In my example I can see it generates "float: left; height: 34px;" in a <li tag for each of the menu elements. What governs the height? If this is basic CSS and nothing to do with teh WebDataMenu then let me know and I will go away and study.
Thank you for your help in resolving this issue for me.
OK. I have established that the problem is 'The Gap'. If you move the cursor slowly then I suspect the mouse-over code spots the cursor is not on the menu and closes it. If the cursor is moved quickly the drop-down doesn't close.
The gap is because I set the height to 30px. If I clear that it works. So it just looks like I have to research the menu style settings to minimise the wide bottom border it the horizontal menu wants to have (and get rid of those flaming list bullets)