Hi all,
How do I change the graphic or even set a specific CSS class for disabled items on a webdatamenu? If I set a button to be disabled, i can see the hover doesn't work and button cannot be clicked, that's fine, but we need to give or users a visual indication of which buttons are disabled, so like the ultrawebtoolbar used to have it would be nice to have a .DIsabledImage property on each .Item, how do we achieve the same effect in the WebDataMenu please?
Hi bartond31,
Thank you for posting on our forums!
After looking into this, there does not appear to be a property among the WebDataMenu or its items that specifies a DisabledCssClass. I did find a property to set your own CSS class on an item and this can be used with some code to set the style when the item is disabled.
I've attached a sample that demonstrates how I went about setting this up in C# and javascript.
If you have any further questions with this, please let me know.
Please let me know if you need further assistance with this issue and I'll be glad to help you.
Michael,
Thank you for your help and will read the MDN documentation. In the mean time, In webdatamenu while hovering over the DataMenuItem I get the background color background-color: #9ECBD6. I want the background color to be none. I tried with following CSS, but not working. Please review the attached sample.
.MenuItemHorizontalRootHover
{
background-color:none;
background-position:left top ;
background-image: none;
border-style: solid;
border-width: 1px;
border-color: none;
_border: 0px;
}
<ig:WebDataMenu ID="WebDataMenu1" runat="server" CssClass ="MenuItemHorizontalRootHover">
<GroupSettings Orientation="Horizontal" />
<Items>
<ig:DataMenuItem Text="Reports" >
</ig:DataMenuItem>
<ig:DataMenuItem Enabled="False" Text="Shipping" Visible="False">
<ig:DataMenuItem Enabled="False" Text="Tracking" Visible="False">
<ig:DataMenuItem Text="Institutional Orders">
</Items>
</ig:WebDataMenu>
Thanks for your help.
Hi SunnyK,
The styling for the Aikido controls is done entirely through CSS, so you can achieve this with just some CSS like below.
.wdm-format:hover span{ cursor: pointer; border-width: 0; text-decoration: underline; color: white;}
I recommend reading some about what you can do with CSS from the MDN documentation here.
In ultrawebmenu I used the following style to underline the item, How do I do this in webdatamenu?.
<HoverItemStyle Cursor="Hand" BorderWidth="0px" Font-Underline="True" ForeColor="White"></HoverItemStyle>
Thanks.
Thanks Michael.
First, it is not recommended to set the CssClass property of the WebDataMenu to be a class that we already use. The CssClass property is meant for you to use for a custom class name, like you are using "wdm-format" for the Reports item. Using a class with the same name as one of our classes could cause some unexpected styling. Also, for your example you don't even need to set the CssClass property to get the result you want.
Second, in your <style> tag, you are using ".wdm-format .igdm_MenuItemVerticalRoot" which is expecting the ".igdm_MenuItemVerticalRoot" element to be a descendant of the ".wdm-format" element. In this case, these two classes are on the same element, so that is one reason the CSS isn't working.
Third, Infragistics has some other CSS that is being used that is being applied to a deeper element in the DOM (namely, the span where the item text is displayed). This is causing the CSS we made to take precedence over some of your properties like color and font-size. If you make a more specific CSS definition, you can use your own styles on the span.
I would recommend using the following styling to get you started. If you need to add any styles specifically for the text (like font color, font family, font size, etc.), you should try adding them to the second definition.
<style type="text/css"> .wdm-format { border:solid 1px Transparent; padding:6px 30px 6px 12px; background-color:crimson; } .wdm-format span { color: white; font-size:20px; }</style>