<telerik:RadToolBar ID="toolbarRibbon" runat="server" Orientation="Horizontal" Width="100%" RenderMode="Lightweight"
OnClientButtonClicking="OnClientButtonClicking"
OnClientButtonClicked="OnClientButtonClicked">
<Items>
<telerik:RadToolBarButton ID="toolBtnAnalyses" runat="server"
Text="Analyses"
Visible="true" Target="_blank"
NavigateUrl="About.aspx"
ImagePosition="AboveText" CheckOnClick="true" ImageUrl="Content/chart.png" />
<telerik:RadToolBarButton ID="RadToolBarButton1" runat="server"
Text="Analyses"
Visible="true"
NavigateUrl="About.aspx"
ImagePosition="AboveText" CheckOnClick="true" ImageUrl="Content/chart.png" />
</Items>
</telerik:RadToolBar>
There is a workaround if the button's ImagePosition is set to "Left" or "Right":
.rtbImage {
pointer-events: none;
}
The click event of the toolbar is triggered only when the user clicks outside of the set button icon (the text or the button element). Clicking directly over the icon does not perform any action in IE11. video: https://www.screencast.com/t/K50K4X8Ck Code to reproduce: <telerik:RadToolBar runat="server" ID="ToolBar1"> <Items> <telerik:RadToolBarButton ImageUrl="//d585tldpucybw.cloudfront.net/sfimages/default-source/labs/kendo/kendoka-states.png" NavigateUrl="Default.aspx" Text="Link"/> <telerik:RadToolBarButton ImageUrl="//d585tldpucybw.cloudfront.net/sfimages/default-source/labs/kendo/kendoka-states.png" NavigateUrl="Default.aspx"/> </Items> </telerik:RadToolBar>
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>
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
REPRO Run the snippet below Inspect the DOM (at the beginning of the form you will see the .rtbSlide element) Click the toolbar button to invoke an ajax request actual: the .rtbSlide element is multiplied with every request expected: the toolbar is fully disposed <asp:UpdatePanel runat="server"> <ContentTemplate> <telerik:RadToolBar RenderMode="Lightweight" ID="RadToolBar1" runat="server" AutoPostBack="true"> <Items> <telerik:RadToolBarButton Text="postback to test"> </telerik:RadToolBarButton> </Items> </telerik:RadToolBar> </ContentTemplate> </asp:UpdatePanel> WORKAROUND <script> var oldDispose = Telerik.Web.UI.RadToolBar.prototype.dispose; Telerik.Web.UI.RadToolBar.prototype.dispose = function() { if (this._moreButtonDropDown && typeof this._moreButtonDropDown.dispose == 'function') { this._moreButtonDropDown.dispose(); } oldDispose.call(this); } </script>
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.
In order to prevent clicking on the same button twice, when server-side click button is handled, the RadToolBar should be disabled or the clicked button. For that reason we are going to expose the following property: SingleClick = None/Button/ToolBar. In case that you want SingleClick property on RadToolBarButton, please leave us a comment with your feedback.
The disable buttons of RadToolbar do not appear as disabled under in IE7, IE8, and Chrome.