Completed
Last Updated: 13 Aug 2021 12:20 by ADMIN
Release Q2 2014
For the time being the following CSS workaround can be used:

CSS:

    <style>
        html .RadButton.RadButton_Glow.RadButton.rbDisabled,
        html .RadButton.RadButton_Glow.RadButton.rbDisabled:hover,
        html .RadButton.RadButton_Glow.RadButton.rbDisabled:active,
        html .RadButton.RadButton_Glow.RadButton.rbDisabled:focus,
        html .RadButton.RadButton_Silk.RadButton.rbDisabled,
        html .RadButton.RadButton_Silk.RadButton.rbDisabled:hover,
        html .RadButton.RadButton_Silk.RadButton.rbDisabled:active,
        html .RadButton.RadButton_Silk.RadButton.rbDisabled:focus,
        html .RadButton.RadButton_Metro.RadButton.rbDisabled,
        html .RadButton.RadButton_Metro.RadButton.rbDisabled:hover,
        html .RadButton.RadButton_Metro.RadButton.rbDisabled:active,
        html .RadButton.RadButton_Metro.RadButton.rbDisabled:focus {
            background-color: transparent;
            background-image: none;
            border: none;
            box-shadow: none;
        }
    </style>

ASPX:

        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" Skin="Glow"></telerik:RadSkinManager>
        <telerik:RadButton ID="RadButton1" runat="server" ToggleType="Radio" ButtonType="ToggleButton" Checked="true" Enabled="true" />
        <telerik:RadButton ID="RadButton2" runat="server" ToggleType="Radio" ButtonType="ToggleButton" Checked="true" Enabled="false" />
        <telerik:RadButton ID="RadButton3" runat="server" ToggleType="Radio" ButtonType="ToggleButton" Checked="false" Enabled="true" />
        <telerik:RadButton ID="RadButton4" runat="server" ToggleType="Radio" ButtonType="ToggleButton" Checked="false" Enabled="false" />
Completed
Last Updated: 13 Aug 2021 12:20 by ADMIN
Release Q1 2016
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: Button
Type: Bug Report
0
The width of the RadButton is higher than the actual one with Silk and Glow skins.

        <telerik:RadButton ID="RadButton1" runat="server" Skin="Silk" Width="300px"></telerik:RadButton>
        <br />
        <telerik:RadButton ID="RadButton2" runat="server" Skin="Glow" Width="300px"></telerik:RadButton>
        <br />
        <telerik:RadButton ID="RadButton3" runat="server" Skin="Default" Width="300px"></telerik:RadButton>
        <br />

Resolution:

    <style>
        span.RadButton {
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
    </style>
Completed
Last Updated: 13 Aug 2021 12:21 by ADMIN
Release Q2 2014
For the time being the following CSS workaround can be used:

CSS:

        <style>
            .RadButton.RadButton_Glow.rbSkinnedButton {
                vertical-align: top;
            }
        </style>
Where Glow is the name of the skin that has larger dimensions (e.g., Silk, Glow, etc).
ASPX:

       <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" Skin="Glow"></telerik:RadSkinManager>
        <telerik:RadTextBox runat="server" ID="txtAdminUser" />
        <telerik:RadButton runat="server" ID="btn1" Text="Add" ButtonType="StandardButton" />

Unplanned
Last Updated: 25 Mar 2014 09:24 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: Button
Type: Feature Request
0
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"/>

Completed
Last Updated: 17 Apr 2015 13:46 by ADMIN
Completed
Last Updated: 11 Dec 2014 15:18 by ADMIN
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>
Completed
Last Updated: 11 Jan 2017 07:09 by ADMIN
Code that reproduces the issue:

        <asp:TextBox ID="Textbox1" runat="server" ValidationGroup="vg1" />
        <telerik:RadButton ID="RadButton1" runat="server" ValidationGroup="vg1" Text="click" />
        <asp:RequiredFieldValidator ID="Requiredfieldvalidator1" ErrorMessage="text box is empty" ControlToValidate="Textbox1" ValidationGroup="vg1" runat="server" />
        <asp:ValidationSummary ID="Validationsummary1" runat="server" ValidationGroup="vg1" ShowMessageBox="true" />
Completed
Last Updated: 13 Aug 2021 12:22 by ADMIN
Release Q2 2015
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" />
Completed
Last Updated: 10 Jun 2015 14:07 by eBuild
ADMIN
Created by: Danail Vasilev
Comments: 3
Category: Button
Type: Bug Report
2
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>
Completed
Last Updated: 07 Jun 2017 14:30 by ADMIN
The workaround is to override the background image of the button:

CSS:

    <style>
        .RadButton.RadButton_Default.rbLinkButton .rbPrimaryIcon {
            background-image: url("images/Groups (16x16).png");
        }
    </style>

ASPX:

       <telerik:RadButton ID="RadButton1" runat="server" ButtonType="LinkButton" Text="Click" Skin="Default">
            <Icon PrimaryIconUrl="images/myImage (16x16).png" PrimaryIconTop="2" PrimaryIconLeft="2" />
        </telerik:RadButton>
Completed
Last Updated: 11 Oct 2017 14:04 by ADMIN
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>
Completed
Last Updated: 11 May 2015 14:51 by Elena
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: Button
Type: Bug Report
0
Currently disabled RadButton doesn't have a border for Silk skin. For the time being the border can be set manually:

        <telerik:RadButton ID="RadButton1" runat="server" Skin="Silk" Text="Submit" BorderColor="#C9C9C9" BorderWidth="1px" Enabled="false">
        </telerik:RadButton>


Completed
Last Updated: 15 Aug 2014 06:25 by ADMIN
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>




Completed
Last Updated: 10 Dec 2013 07:39 by ADMIN
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>
Won't Fix
Last Updated: 11 Jun 2021 07:28 by ADMIN

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);

Completed
Last Updated: 13 Aug 2021 12:23 by ADMIN
Release Q3 2013 SP1
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);
        }

Completed
Last Updated: 10 Aug 2021 14:11 by ADMIN
If the Width property of a RadButton is set, its appearance in the Visual Studio 2012 Design view will be broken.

The icons sprite starts showing when the width is sufficiently large, test with different values, e.g. 80px, 100px, 200px, 400px, etc.
Declined
Last Updated: 27 Jan 2014 10:30 by ADMIN
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>
Declined
Last Updated: 07 Jun 2017 14:35 by ADMIN
Implementing a fix for the Lightweight RenderMode is likely to cause regressions:
- https://feedback.telerik.com/Project/108/Feedback/Details/166590-fix-the-compatibility-of-radbutton-in-lightweight-with-image-in-cookieless-sessio
- https://feedback.telerik.com/Project/108/Feedback/Details/66505-fix-the-compatibility-of-radbutton-with-custom-image-that-contains-special-symbol

Thus, there are several workarounds:
- use the Classic RenderMode, if possible
- use the script below
- use CSS to set the icon instead of a property (example further down)

JS workaround:
			<telerik:RadButton runat="server" ID="rb1" RenderMode="Lightweight">
				<Icon PrimaryIconUrl="~/Circle_Green_20.png" />
			</telerik:RadButton>
			<telerik:RadPushButton runat="server" ID="rpb1" text="sample text">
				<Icon Url="Circle_Green_20.png" />
			</telerik:RadPushButton>
			<script>
				function repaintButtons() {
					$telerik.$(".RadButton.rbIconButton, .RadButton.rbIconOnly").each(function (index, elem) {
						if (elem && elem.control && elem.control.repaint) {
							elem.control.repaint();
						}
					});
					//uncomment this if you want the method to fire after each partial postback as well
					//Sys.Application.remove_load(repaintButtons);
				}
				Sys.Application.add_load(repaintButtons);
			</script>


CSS workaround:

			<telerik:RadButton runat="server" ID="rb1" RenderMode="Lightweight" CssClass="myCustomIcon" Text="some text">
				<Icon PrimaryIconUrl="Circle_Green_20.png" />
			</telerik:RadButton>
			<style>
				.myCustomIcon .rbPrimaryIcon
				{
					background-image: url(Circle_Green_20.png);
				}
			</style>
Completed
Last Updated: 03 Sep 2013 13:29 by Michael
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.