Close the collapsed elements dropdown after clicking on an item

Environment

Product

RadToolBar for ASP.NET AJAX

Description

The default behavior is when a user clicks on a button or another item to execute its command/handler automatically, but this operation does not close the popup with collapsed/hidden tools. The only way to collapse it is to click the split button again. The article shows how to collapse the toolbar dropdown once an item is selected from the toolbar.

Solution

You can close the overflow (dropdown with hidden items) using the sender.get_view()._collapseMoreButton() method, e.g.

        <script>
            function OnClientButtonClicking(sender, args) {
                sender.get_view()._collapseMoreButton();
            }
        </script>
        <telerik:RadToolBar RenderMode="Lightweight" ID="RadToolBar1" runat="server" OnClientButtonClicking="OnClientButtonClicking">
            <Items>
                <telerik:RadToolBarButton Text="Bold" ToolTip="Bold"></telerik:RadToolBarButton>
                <telerik:RadToolBarButton Text="Italic" ToolTip="Italic"></telerik:RadToolBarButton>
                <telerik:RadToolBarButton Text="Underline" ToolTip="Underline"></telerik:RadToolBarButton>
                ...
            </Items>
        </telerik:RadToolBar>