Currently RadButton configured as a toggle radio/checkbox button doesn't accept custom icons to be used because it already has predefined icons. For the time being the ButtonType property can be set to "StandardButton" and its background image can be hidden. For example: CSS: <style> .RadButton_Default.rbSkinnedButton, .RadButton_Default .rbDecorated, .RadButton_Default.rbVerticalButton, .RadButton_Default.rbVerticalButton .rbDecorated, .RadButton_Default .rbSplitRight, .RadButton_Default .rbSplitLeft { background-image: none !important; } </style> ASPX: <telerik:RadButton ID="RadButton3" runat="server" GroupName="OverSampling" Text="" ButtonType="StandardButton" ToggleType="Radio" Checked="false" AutoPostBack="false"> <ToggleStates> <telerik:RadButtonToggleState Text="Yes" PrimaryIconUrl="radio6-on.png" Selected="true" /> <telerik:RadButtonToggleState Text="Yes" PrimaryIconUrl="radio6-off.png" /> </ToggleStates> </telerik:RadButton> <telerik:RadButton ID="RadButton4" runat="server" GroupName="OverSampling" Text="No" ButtonType="StandardButton" ToggleType="Radio" AutoPostBack="false" Checked="true"> <ToggleStates> <telerik:RadButtonToggleState PrimaryIconUrl="radio6-on.png" Selected="true" /> <telerik:RadButtonToggleState PrimaryIconUrl="radio6-off.png" /> </ToggleStates> </telerik:RadButton>
Currently when cookiless session is enabled and RadButton with custom image is used the Image is not displayed, until the button is hovered. ASPX: <telerik:RadButton ID="ButtunTest" runat="server" Icon-PrimaryIconUrl="~/Examples7/eClose.png" Text="Testbutton" Width="200px" UseSubmitBehavior="False" /> Web.Config: <system.web> <sessionState cookieless="true"></sessionState> </system.web> The workaround is to override the background image of the button: <style> .RadButton.RadButton_Default.rbSkinnedButton .rbPrimaryIcon { background-image: url("/RadControlsWebSite2/Examples7/eClose.png"); } </style>
For the time being the following workaround can be used: ASPX: <telerik:RadButton ID="RadButton1" runat="server" Text="Click" NavigateUrl="http://www.google.bg" Target="_blank" ButtonType="LinkButton"> </telerik:RadButton> <script> Telerik.Web.UI.Button.NavigationFunctionality.prototype._handleNavigateUrl = function () { $ = $telerik.$; var that = this, target = that.options.navigateTarget, url = that.options.navigateUrl; if (target && target == "_blank") window.open(url); if (target && target == "_parent") window.parent.location.href = url; if (target && target == "_top") window.parent.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); } } </script>
Declined with the reason: Item is a duplicate of http://feedback.telerik.com/Project/108/Feedback/Details/127356
A workaround is using ButtonType=SkinnedButton or using the Glow or BlackMetroTouch skin. You can use the following CSS workaround to remove the additional opacity Safari adds for the input that results in the sprite being visible: .rbDisabled .rbDecorated { opacity: 1; }
For the time being the following workaround can be used: <telerik:RadButton ID="RadButton1" runat="server" Text="click" ButtonType="LinkButton" EnableEmbeddedSkins="false" Font-Underline="true"/>
Declined with the following description: Telerik controls can be found on the client-side through the findControl() method exposed by the Telerik client static library (http://www.telerik.com/help/aspnet-ajax/telerik-static-client-library.html). For example: JavaScript: <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script> function pageLoad() { var btn1 = $get("<%=RadButton1.ClientID %>"); var btn2 = $telerik.findControl(btn1, "RadButton2"); btn2.set_text("New text"); } </script> </telerik:RadCodeBlock> ASPX: <telerik:RadButton runat="server" ID="RadButton1" Width="190" Height="190"> <ContentTemplate> <span>RadButton Content</span> <telerik:RadButton ID="RadButton2" runat="server" Text="OldText" /> </ContentTemplate> </telerik:RadButton>
In Q3 2013 the clicking of RadButton is not raised when Enter key is pressed inside a password TextBox and the RadButton is set to be the default button for the form. The workaround is to put the following JavaScript code below the declaration of the RadButton: <script type="text/javascript"> Telerik.Web.UI.RadButton.prototype._isInputTypeText = function (element) { var nodeName = element.nodeName, type = element.type; if (nodeName != "INPUT" || !type) return false; return type == "text" || type == "password" || type == "email" || type == "number" || type == "url" || type == "search" || type == "tel"; } </script>
Currently when the RadButton is clicked and a modal RadWindow that contains another button is opened and then the second button is clicked with enter key, so that it closes the RadWindow, the first RadButton is clicked again. The workaround is to set the Modal property of the RadWindow to false.
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".
RadButton peforms duplicate requests when: - A RadButton exists on the page and the form is submitted when a text box is focused and enter key is hit. - the defaultbutton property of the form is set to the id of the RadButton For the time being the following functions' override can be used: <script type="text/javascript"> Telerik.Web.UI.RadButton.prototype._isButtonActiveElement = function (eventTarget) { var doc = eventTarget && eventTarget.ownerDocument ? eventTarget.ownerDocument : document; var activeElement = doc.activeElement; if (!activeElement) return false; if (activeElement === this.get_element() || $telerik.$.contains(this.get_element(), activeElement)) return true; return false; } var originalMouseClickHandler = Telerik.Web.UI.RadButton.prototype._mouseClickHandler; Telerik.Web.UI.RadButton.prototype._mouseClickHandler = function (args) { if (!this.get_enabled() || this.get_readOnly()) { $telerik.cancelRawEvent(args.rawEvent); return false; } var eventTarget = args.target ? args.target : args.srcElement; if (eventTarget === this.get_element() && !this._isButtonActiveElement(eventTarget) && !$telerik.isTouchDevice) { $telerik.cancelRawEvent(args.rawEvent); this.focus(); return false; } originalMouseClickHandler.call(this, args); } </script> The workaround must be placed after the declaration of the RadButton, in order to take effect.
When RadButton is set as default button the client side cancel event is not working when pressing Enter key.
Currently the click event is not triggered when RadButton is focused and enter key is pressed. This behavior is observed in FireFox and WebKit browsers only.
When the RadButton, validation controls and controls which are to be validated are set with the same ValidationGroup, the validation is performed despite setting RadButton's CausesValidation property to false.
Currently it is not possible to focus RadButton through tabbing navigation unless the TabIndex property is set. For the time being TabIndex of 0 can be set, so that the tab order on the page layout is not distracted. For example: <script type="text/javascript"> function pageLoad() { //Getting the button's wrapper button1 = $find("<%=RadButton1.ClientID %>"); buttonWrapper = $telerik.$(button1.get_element()); //Set tabindex attribute to the span element buttonWrapper.attr("tabindex", "0"); } </script> Note that TabIndex=0 is set to the span wrapper element of the RadButton's input with JavaScript as setting RadButton's TabIndex property to 0 will not take effect.
When there is a RadButton with configured ValidationGroup, the client-side ASP.NET validation on the page will not be executed, if there are validation controls, which use the same ValidationGroup. The unexpected behaviour is observed in FireFox and Opera.