RibbonBarMenuItem leaves the parent RibbonBarMenu pressed

Progress® Telerik® UI for ASP.NET AJAX Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 07 Jun 2021 13:36 by ADMIN

Alejandro Genovesi

Created on: 07 Jun 2021 13:32

Category: RibbonBar

Type: Bug Report

RibbonBarMenuItem leaves the parent RibbonBarMenu pressed

I have a RadRibbonBar with a RibbonBarMenu that contains a hierarchical menu item structure.

When clicking on an item (Parent, the main menu button is pressed and I have no way to make it return to the normal state.

The NavigateURL of the parent item is null (And even if it was not null, it still leaves me with the unusable RibbonBarMenu)

Here my code:

<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>

1 comment

ADMIN

Rumen

Posted on: 07 Jun 2021 13:36

Hi Alejandro,

Thank you for reporting this issue!

Until we fix it, please use the solution provided below:

<script>
    function OnClientMenuItemClicked(sender, args) {
        setTimeout(function () {
            if (args.get_item().get_owner() instanceof Telerik.Web.UI.RibbonBarMenu) {
                args.get_item().get_owner()._$element.removeClass("rrbExpanded")
            }
        }, 50)
    }
</script>
 <telerik:RadRibbonBar ID="RadRibbonBarTest" runat="server" Width="100%"
    RenderMode="Lightweight"
    EnableMinimizing="true"  OnClientMenuItemClicked="OnClientMenuItemClicked"
    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>

Best Regards,
Rumen
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.