A placeholder feedback item for responsive toolbar based on customer feedback: * Adaptive (width-wise) toolbar sort of like Kendo's * Allow hiding text / hiding items on smaller devices
The issue can be reproduced in Chrome, Edge, FireFox.
Steps to replicate: In the browser, navigate to the RadToolBarButton and press enter. (click is not performed and events are not fired)
<script>
function buttonClicked(sender, args) {
debugger;
}
function buttonClicking(sender, args) {
debugger;
}
</script>
<telerik:RadToolBar ID="RadToolBar1" runat="server" OnClientButtonClicked="buttonClicked" OnClientButtonClicking="buttonClicking">
<Items>
<telerik:RadToolBarButton Text="Button"></telerik:RadToolBarButton>
</Items>
</telerik:RadToolBar>
Replicated only when Orientation=Vertical. The problem seems to be the _responsiveCheck function of Toolbar\Views\LiteView.js called from the _repaint method of the same file. screencast: https://www.screencast.com/t/SF5b1KZR7pIp screenshot before/after https://www.screencast.com/t/KG645ZgX Workaround: calling toolbar.get_view()._showAllHiddenItems(); after adding programmatically the buttons.
When an item with controls in the item template is collapsed, the AJAX settings are broken as the control's DOM element is moved because the MoreButton dropdown is not part of the Toolbar element itself. The solution is to set the overflow property of the item to Never - <telerik:RadToolBarButton OverFlow="Never"> https://docs.telerik.com/devtools/aspnet-ajax/controls/toolbar/mobile-support/responsive-design#preventing-items-from-being-collapsed