When a SingleClick RadButton is clicked and its AutoPostBack property is set to false its disabled state as well as the optional text from the SingleClickText property are persisted. For the time being the SingleClick functionality can be set on the client. For example: ASPX: <script type="text/javascript"> function DoSubscriptionValidation(button, args) { var isPostBack = window.confirm("Perform postback?"); button.set_autoPostBack(isPostBack); if (isPostBack) { button.set_singleClick(true); button.set_singleClickText("Please Wait"); button.click(); } } </script> <telerik:RadButton ID="RadButton1" runat="server" Text="Click" OnClick="OnClick1" OnClientClicking="DoSubscriptionValidation" /> C#: protected void OnClick1(object sender, EventArgs e) { System.Threading.Thread.Sleep(2000); }
When a RadButton with a PostBackUrl property set is located inside an UpdatePanel, it does not redirect to the PostBackUrl on click and a JavaScript error message is thrown. The workaround is to use: - Either a RadButton (ButtonType="LinkButton") and set its NavigateUrl to the desired page that is to be redirected -OR a RadButton (ButtonType="StandardButton") and use its OnClientClicking event handler to cancel the postback and redirect to the desired page through window.location.href. For example: <script type="text/javascript"> function OnClientClicking(sender, args) { window.location.href = "http://www.bing.com"; args.set_cancel(true); } </script>
Reproduced with latest official (2016.1.113) and internal (2016.2.128) in all browsers. Not reproducible with 2015 Q3 SP1. Code to reproduce the problem: <asp:Button runat="server" ID="GoStep2" OnClick="GoStep2_Click" Text="Next" /> <asp:Panel runat="server" ID="Panel1"> <asp:Button Text="aspButton" runat="server" /> <telerik:RadButton ID="Button1" Text="radButton" runat="server" /> </asp:Panel> protected void Page_Load(object sender, EventArgs e) { Panel1.Enabled = false; } protected void GoStep2_Click(object sender, EventArgs e) { Panel1.Enabled = true; } 1 click the Next button 3. When the page loads after the postback the RadButton remains disabled, unlike the asp:Button.
For the time being you can use the following workaround: CSS: <style> .RadButton input { width: 100% !important; } </style> ASPX: <telerik:RadButton ID="rbACH" runat="server" ToggleType="Radio" ButtonType="StandardButton" GroupName="test" AutoPostBack="false" Text="eCheck" Width="200px"> <ToggleStates> <telerik:RadButtonToggleState Text="eCheck" PrimaryIconCssClass="rbToggleRadioChecked" /> <telerik:RadButtonToggleState Text="eCheck" PrimaryIconCssClass="rbToggleRadio" /> </ToggleStates> </telerik:RadButton> <br /> <br /> <telerik:RadButton ID="btnToggle" runat="server" ToggleType="Radio" ButtonType="StandardButton" GroupName="StandardButton" Width="200px"> <ToggleStates> <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleRadio" /> <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleRadio" /> </ToggleStates> </telerik:RadButton>
Two possible workarounds are attached
For the time being you can either set the UseSubmitBehavior property of the button to false or place the following JavaScript workaround below the button's declaration: ASPX: <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <asp:UpdatePanel ID="Updatepanel1" runat="server"> <ContentTemplate> <telerik:RadButton ID="RadButton1" runat="server" Text="Click" OnClick="RadButton1_Click" RenderMode="Lightweight" /> <asp:Label ID="Label1" Text="" runat="server" /> </ContentTemplate> </asp:UpdatePanel> <script> var $T = Telerik.Web.UI; $T.RadButton.prototype._mouseClickHandler = function (args) { var button = this, result; var target = args.target; var e = args.rawEvent; var element = button.get_element(); if (target !== element && $telerik.isDescendant(element, target)) { $telerik.cancelRawEvent(e); simulateMouseEvent(element, "click", e); return; } try { if (button._functionality.clicking(args) && !element.getAttribute("rwOpener")) { button._functionality.click(args); result = button._functionality.clicked(args); } } finally { button._mouseUp(args); button._restoreFlags(); setTimeout(function () { Page_BlockSubmit = false; }, 0); return !result ? $telerik.cancelRawEvent(e) : true; } }; function simulateMouseEvent(element, eventName, args) { var o = $telerik.$.extend({}, args || {}); var oEvent; if (document.createEvent) {//deprecated DOM2 Event Model oEvent = document.createEvent("MouseEvents"); oEvent.initMouseEvent(eventName, o.bubbles, o.cancelable, document.defaultView, o.button, o.screenX, o.screenY, o.clientX, o.clientY, o.ctrlKey, o.altKey, o.shiftKey, o.metaKey, o.button, element); } else if ("MouseEvent" in window) {//standard DOM3 Event Mode oEvent = new MouseEvent('click', o); } oEvent && element.dispatchEvent(oEvent); if (!oEvent) {//IE oEvent = extend(document.createEventObject(), o); element.fireEvent('on' + eventName, oEvent); } return element; } function extend(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } </script> </form> C#: protected void RadButton1_Click(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToString(); }
When the focus of the RadButton is set on the server-side, the active element becomes the inner input and not the span wrapper of the button. For the time being the client-side focus can be set. For example: <telerik:RadButton ID="serverFocusBtn" runat="server" RenderMode="Classic" Text="Postback" TabIndex="0" OnClientLoad="btn_load" /> <script type="text/javascript"> function btn_load(btn) { btn.focus(); } </script>
Currently the default height of RadButton with Silk skin and CssClass="rbPrimaryButton" is 28px. The correct height must be auto, so that the text inside the RadButton can be wrapped when it is longer and no height is specified. For the time being the following CSS workaround can be used: CSS: span.RadButton.RadButton_Silk.rbLinkButton.rbPrimaryButton { height: auto; } ASPX: <telerik:RadButton ID="RadButton1" runat="server" Skin="Silk" ButtonType="SkinnedButton" Text="aaaaaaaaaaa bbbbbbbbbbbbbb cccccccccccc" Width="200px" CssClass="rbPrimaryButton" /> <telerik:RadButton ID="RadButton3" runat="server" Skin="Silk" ButtonType="SkinnedButton" Text="aaaaaaaaaaa bbbbbbbbbbbbbb cccccccccccc" Width="200px" CssClass="rbSecondaryButton" />
When the PrimaryIconUrl and PrimaryHoveredIconUrl properties of the RadButton are set and a dialog is opened when OnClientClicked event is triggered, the button's icon from the hovered image persists. This behavior is observed only in FireFox.
For the time being you can use the following JavaScript workaround: <telerik:RadButton ID="radbtnVehicleList" runat="server" Text="Google" Skin="Default" Width="200px" NavigateUrl="http://www.telerik.com" ButtonType="LinkButton" AutoPostBack="false" Target="_blank"> </telerik:RadButton> <script> Telerik.Web.UI.Button.NavigationFunctionality.prototype = { clicked: function (ev) { var that = this; that.base.clicked(ev); that._handleNavigateUrl(); }, _handleNavigateUrl: function () { var that = this, target = that.options.navigateTarget, url = that.options.navigateUrl; if (!url) return; if (target && target == "_blank") window.open(url); else if (target && target == "_parent") window.parent.location.href = url; else if (target && target == "_top") window.top.location.href = url; else if (!target || target == "_self") window.location.href = url; else { var targetFrame = $("iframe[name='" + target + "']").get(0) || $("frame[name='" + target + "']").get(0) || $("#" + target).get(0); if (targetFrame && targetFrame.tagName.toLowerCase().indexOf("frame") > -1) { targetFrame.setAttribute("src", url); } else if (target) { window.open(url, target); } } } }; </script>
For the time being you can place the following JavaScript workaround at the end of the form: <script> $T = Telerik.Web.UI; $T.RadButton.prototype.initialize = function () { var that = this; $T.RadButton.callBaseMethod(that, "initialize"); //if the button is in RTL parent apply rbRtl CSS class to the holding element that._setRightToLeft(); that._createToggleStates(); that._requestIconsAndImages(); if (that.get_checked()) { that.clearCheckedRadios(that.get_uniqueGroupName()); } $T.registerRadButton(that); that._initModules(); that._initHTML(); that._attachClickEvent(true); if (that.get_enabled() && !that.get_readOnly()) { that._attachEvents(true); } that.updateClientState(); that.raiseEvent('load', Sys.EventArgs.Empty); }; </script>
SharePoint 2013 applies global styles to the inputs that affect the appearance of the RadButtons.For the time being the styles that SharePoints sets to the inputs can be overriden: ASPX: <telerik:RadButton ID="RadButton1" runat="server" Text="RadButton"><Icon PrimaryIconCssClass="rbAdd" /></telerik:RadButton> CSS: <style type="text/css"> .RadButton.RadButton_Default.rbSkinnedButton input { padding: 0px 10px 0px 25px; border: none; margin-left: 0px; } </style>