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>
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.
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>
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>
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"/>
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" />
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>
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>
Declined with the reason: Item is a duplicate of http://feedback.telerik.com/Project/108/Feedback/Details/127356
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" />
Currently the value of RadButton's property 'Width' is not applied correctly and its width is not as specified.
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; }