When the RadButton is hovered with the mouse pointer being over the button's text, the hover state is lost. This behavior is observed with Silk and Glow skins under IE 9 or less. The workaround is to set the ButtonType to "SkinnedButton" or "LinkButton".
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 RadButton is set as default button the client side cancel event is not working when pressing Enter key.
RadButton's clicking is triggered when the following conditions are met: -input type="text" handles onkeypress event -onkeypress event focuses the RadButton -the key pressed that is handled by onkeypress event is Space or Enter Triggering the clicking with "Space" can be workaround by setting some timeout to the focus(). For example: ASPX: <telerik:RadButton ID="RadButton1" runat="server" Text="RadButton"></telerik:RadButton> <input type="text" name="name" value=" " onkeypress="KeyPressed();" /> JavaScript: function KeyPressed() { setTimeout(function () { $find("RadButton1").focus(); }, 200); }
Important: The issue only occurs when the Buttons are spread around in different rows in RadGrid.
When multiple RadButtons (ButtonType="ToggleButton" ToggleType="Radio") are grouped through GroupName property, the server-side property checked doesn't take effect when the button which is to be checked is declared before the current checked button. The workaround is to execute JavaScript from the server which sets the checked property. For example: C#: string script = "function f(){$find(\"" + RadButton1.ClientID + "\").set_checked(true); Sys.Application.remove_load(f);}Sys.Application.add_load(f);"; ScriptManager.RegisterStartupScript(this, this.GetType(), "key", script, true);
RadButton configured as an Image button cannot be clicked if a node from a RadTreeView is selected and EnableDragAndDrop property of the RadTreeView is set to true. The issue is reproducible in iPAD. For the time being either the EnableDragAndDrop property of the RadTreeView can be set to false or the following JavaScript code can be placed after the declaration of the RadTreeView: <script type="text/javascript"> var $T = Telerik.Web.UI; Telerik.Web.UI.RadTreeView.prototype._onDocumentMouseUp = function (e) { if ($telerik.isTouchDevice) { //this._cancelEvent(e); if (this.longTouchID) { clearTimeout(this.longTouchID); this.longTouchID = 0; } this._treeTouchScroll._dragCanceled = false; } this._detachDragDropEvents(); if (!this._dragging) { this._initialDragMousePos = null; this._initialDragNode = null; return; } var sourceNodes = this._sourceDragNodes, target = $telerik.getTouchTarget(e); var destinationNode = null; if (target == this._dropClue) { // If the event has hit the DropClue we take the node it is attached to destinationNode = this._dropClue.treeNode; } else { destinationNode = this._extractNodeFromDomElement(target); } if (destinationNode) { if (destinationNode._isDescendantOf(this._initialDragNode) || this._initialDragNode == destinationNode) { this._clearDrag(); return; } } var htmlElement = target; var eventArgs = new $T.RadTreeNodeDroppingEventArgs(sourceNodes, destinationNode, htmlElement, this._draggingPosition, e); this.raiseEvent("nodeDropping", eventArgs); if (eventArgs.get_cancel()) { this._clearDrag(); return; } htmlElement = eventArgs.get_htmlElement(); var command = this._getDropCommand(destinationNode, sourceNodes, htmlElement); if (command.commandName) { eventArgs = new $T.RadTreeNodeDroppedEventArgs(sourceNodes, e); this.raiseEvent("nodeDropped", eventArgs); this._postback(command); } this._clearDrag(); }; </script>
If the Target property of the RadButton (ButtonType="LinkButton") is set to a custom string (the name of the target window, where the content of the linked page will be rendered), the link is not opened. For the time being the following workaround can be used: JavaScript: <script> function OnClientClicked(sender, args) { var target = sender.get_target(); var navURL = sender.get_navigateUrl(); window.open(navURL, target) } </script> ASPX: <telerik:RadButton ID="RadButton1" runat="server" ButtonType="LinkButton" Text="click" Target="MyWindow" NavigateUrl="http://www.google.com" OnClientClicked="OnClientClicked" />
For the time being the following JavaScript workaround can be used: JavaScript: function pageLoad() { fixImageURL(); } function fixImageURL() { var imageBtns = $telerik.$('.rbImageButton'); for (var i = 0; i < imageBtns.length; i++) { var btnStyle = imageBtns[i].getAttribute('style').replace("background-image:url(", "background-image:url('").replace(");", "');"); imageBtns[i].setAttribute('style', btnStyle); } } ASPX: <telerik:RadButton ID="RadButton1" runat="server" Width="50px" Height="50px"> <Image ImageUrl="50x50.png" /> </telerik:RadButton> <telerik:RadButton ID="RadButton2" runat="server" Width="50px" Height="50px"> <Image ImageUrl="50x50.png" /> </telerik:RadButton>
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" />
For the time being you can use the following workaround: JavaScript: <script> function fixBtnRepaint(sender, args) { sender._useModules = false; } </script> ASPX: <telerik:RadButton ID="RadButton1" runat="server" Text="Click" OnClientLoad="fixBtnRepaint"> </telerik:RadButton>
For the time being the following workaround can be used: <script> function OnClientClicked() { alert('OnClientClicked'); } function OnClientClicking() { alert('OnClientClicking'); } function fixBtnClicked(sender, args) { sender._useModules = false; } </script> <telerik:RadButton ID="RadButton1" runat="server" ButtonType="LinkButton" Text="Click" OnClientLoad="fixBtnClicked" Target="_parent" NavigateUrl="http://www.google.com" OnClientClicked="OnClientClicked" OnClientClicking="OnClientClicking" />
RadButton with ButtonType="ToggleButton", ToggleType="CheckBox" or ToggleType="Radio" in lightweight mode, renders the icons and the text labels at incorrect position. For the time being, you can use the following CSS as a workaround: .RadButton.rbCheckBox span.rbText, .RadButton.rbRadioButton span.rbText, .RadButton.rbToggleButton span.rbText { vertical-align: initial; /* FF and Chrome */ vertical-align: auto; /* IE */ } button.RadButton { vertical-align: initial; vertical-align: auto; }
RadButton with button type checkbox or radio has incorenct margin in Silk and Glow. Due to the negative value of the margin, the checkbox/radio button icons are partially hidden. The following CSS fixes the issue (for Silk skin): .rbCheckBox.RadButton_Silk .rbToggleCheckbox.rbIcon, .rbCheckBox.RadButton_Silk .rbToggleCheckboxChecked.rbIcon, .rbCheckBox.RadButton_Silk .rbToggleCheckboxFilled.rbIcon, .rbToggleButton.RadButton_Silk .rbToggleCheckbox.rbIcon, .rbToggleButton.RadButton_Silk .rbToggleCheckboxChecked.rbIcon, .rbToggleButton.RadButton_Silk .rbToggleCheckboxFilled.rbIcon, .rbRadioButton.RadButton_Silk .rbToggleRadio.rbIcon, .rbRadioButton.RadButton_Silk .rbToggleRadioChecked.rbIcon { margin: 0 !important ;
An error is thrown when RadButton NavigateUrl is defined in content page with tilde and the master page is up one level. Workaround: Remove the tilde from the navigate url.
This is a duplicate of http://feedback.telerik.com/Project/108/Feedback/Details/210060, see there for a workaround and for status updates. You can change the DPI settings in Windows from the Display Settings. Setting a size of 125% and clicking on a button will throw a server exception: ------- Input string was not in a correct format. Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. Exception Details: System.FormatException: Input string was not in a correct format. Source Error: An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below. Stack Trace: [FormatException: Input string was not in a correct format.] System.Number.StringToNumber(String str, NumberStyles options, NumberBuffer& number, NumberFormatInfo info, Boolean parseDecimal) +12526913 System.Number.ParseInt32(String s, NumberStyles style, NumberFormatInfo info) +120 Telerik.Web.UI.RadImageButton.LoadPostData(String postDataKey, NameValueCollection postCollection) +256 Telerik.Web.UI.RadWebControl.System.Web.UI.IPostBackDataHandler.LoadPostData(String postDataKey, NameValueCollection postCollection) +16 System.Web.UI.Page.ProcessPostData(NameValueCollection postData, Boolean fBeforeLoad) +457 System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1833
Using RequiredFieldValidator with RadButton (ToogleButton type), RadRadioButtons and RadCheckButtons throws a server exception that cannot be validated. Workaround: ASP.NET: <telerik:RadRadioButtonList ID="RadRadioButtonList1" runat="server" Text="RadRadioButtonList" > <Items> <telerik:ButtonListItem Text="Item 1" Value="0" /> <telerik:ButtonListItem Text="Item 2" Value="1" /> </Items> </telerik:RadRadioButtonList> <asp:CustomValidator ID="CustomButtonListValidator" ErrorMessage="errormessage" runat="server" OnServerValidate="CustomButtonListValidator_ServerValidate" /> C#: protected void CustomButtonListValidator_ServerValidate(object source, ServerValidateEventArgs args) { args.IsValid = (RadRadioButtonList1.SelectedIndex > -1); }