<body>
<form id="form1" runat="server">
<div>
<telerik:RadScriptManager runat="server" ID="rsm"></telerik:RadScriptManager>
<telerik:RadRibbonBar ID="RadRibbonBarTest" runat="server" Width="100%"
RenderMode="Lightweight"
EnableMinimizing="true"
RenderInactiveContextualTabGroups="False">
<telerik:RibbonBarTab Text="Main Tab">
<telerik:RibbonBarGroup Text="Operations">
<Items>
<telerik:RibbonBarMenu Size="Large" Text="New process"
ImageRenderingMode="Dual"
ID="RibbonBarMenuOptions" runat="server">
<Items>
<telerik:RibbonBarMenuItem Text="Parent 1">
<Items>
<telerik:RibbonBarMenuItem Text="Goto Google" NavigateUrl="https://www.google.com">
</telerik:RibbonBarMenuItem>
<telerik:RibbonBarMenuItem Text="Goto Telerik" NavigateUrl="https://www.telerik.com">
</telerik:RibbonBarMenuItem>
</Items>
</telerik:RibbonBarMenuItem>
</Items>
</telerik:RibbonBarMenu>
</Items>
</telerik:RibbonBarGroup>
</telerik:RibbonBarTab>
</telerik:RadRibbonBar>
</div>
</form>
</body>
When the ImageUrl or ImageUrlLarge property is set and a button is disabled, it should show the ImageUrl or ImageUrlLarge image instead of a non-descript "x" image. This should be the default behavior when the DisabledImageUrl and DisabledImageUrlLarge proeprties are not set. I have created some javascript which accomplishes this, however this is really overkill and is as always subject to breakage if you change the control. I'm not sure why you guys decided your random "X" image would be a better indicator of a disabled button than the original image.
function setRibbonDisabledImages(ribbonBar) {
var tabs = ribbonBar.get_tabs();
for (i = 0; i < tabs.get_count(); i++) {
var tab = tabs.getTab(i);
var groups = tab.get_groups();
for (j = 0; j < groups.get_count(); j++) {
var group = groups.getGroup(j);
var items = group.get_items();
for (k = 0; k < items.get_count(); k++) {
var item = items.getItem(k);
if (item.get_imageUrl()) {
item.set_disabledImageUrl(item.get_imageUrl());
}
if (item.get_imageUrlLarge()) {
item.set_disabledImageUrlLarge(item.get_imageUrlLarge());
}
}
}
}
}
In lightweight the issue is not observed:
<telerik:RadRibbonBar runat="server" RenderMode="Classic">
<Tabs>
<telerik:RibbonBarTab Text="home">
<%-- duplicate the group and items inside to replicate more easily --%>
<telerik:RibbonBarGroup Text="Documents">
<Items>
<telerik:RibbonBarButton Text="Item 1" />
</Items>
</telerik:RibbonBarGroup>
</telerik:RibbonBarTab>
</Tabs>
</telerik:RadRibbonBar>
Workaround: using the following handler for the OnClientLoad event of the RibbonBar <script> function OnClientLoad(sender, args) { var oldHide = sender._hideMenus; sender._hideMenus = function () { var ribbonBar = this, visibleMenus = $telerik.$(sender.get_element()).find("." + ribbonBar._cssClasses._rrbMenuGroupOut).filter(":visible").get(); for (i = 0, len = visibleMenus.length; i < len; i++) { var menu = visibleMenus[i]; menu._button.removeClass("rrbExpanded"); } oldHide.call(this) } } </script>