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>
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>
The icon of a checkbox button appears over the text when the configured width is not enough to display them both on one line in Classic render mode.
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(); }
For the time being you can use the following CSS workaround: CSS: <style> .RadButton span.rbText { display: inline; } </style> ASPX: <telerik:RadButton ID="rbACH" runat="server" ToggleType="Radio" ButtonType="StandardButton" GroupName="test" AutoPostBack="false" Text="eCheck" Width="200px" RenderMode="Lightweight"> <ToggleStates> <telerik:RadButtonToggleState Text="eCheck" PrimaryIconCssClass="rbToggleRadioChecked" /> <telerik:RadButtonToggleState Text="eCheck" PrimaryIconCssClass="rbToggleRadio" /> </ToggleStates> </telerik:RadButton>
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
A JavaScript error is thrown when a button with AutoPostback enabled on the client-side is clicked in IE. Note: The error is thown only when the AutoPostback is enabled in the ClientClicked event handle, but not in ClientClicking. JavaScript error: SCRIPT5007: Unable to get property 'controlState' of undefined or null reference File: ScriptResource.axd, Line: 658, Column: 38
Having an initially disabled button that is later enabled on the client does not apply the hover effect (rbHovered class is not appended to the DOM element in mouse over). You can use RadPushButton instead of RadButton (http://demos.telerik.com/aspnet-ajax/pushbutton/overview/defaultcs.aspx), which works properly in this scneario.
http://demos.telerik.com/aspnet-ajax/button/examples/radiosandcheckboxes/defaultcs.aspx?skin=Material
Add custom Attribute to the RadRadioButtonList control. By the way its not available as a control in the drop down. Andy
The blue part of the radio and check buttons is gone in 2017.1.xxx. There is a slight hover highlight, but in general, it is drastically different from the previous version (2016.3.1303). The new appearance can be seen at http://demos.telerik.com/aspnet-ajax/radiobuttonlist/examples/overview/defaultcs.aspx?skin=Silk http://demos.telerik.com/aspnet-ajax/checkboxlist/examples/overview/defaultcs.aspx?skin=Silk http://demos.telerik.com/aspnet-ajax/checkbox/overview/defaultcs.aspx?skin=Silk as well as a comparison between before and after the new release in the attached screenshot.
Checkbox buttons are missing when ToggleType='CustomToggle' in Lightweight rendering. The issue is introduced in 2017 R1 release. Code to reproduce: <telerik:RadButton runat="server" ID="btnEnableTrace" RenderMode="Lightweight" ButtonType="ToggleButton" ToggleType="CustomToggle"> <ToggleStates> <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckbox"></telerik:RadButtonToggleState> <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckboxChecked"></telerik:RadButtonToggleState> </ToggleStates> </telerik:RadButton>
Just updated the controls and as usual got bitten by the change. Very simple, we had a button that changed colors based on a change in an edit page. The Button remained a White Color if nothing was entered, a Green Color if the fields were all correct and a Red Color if the fields were in error. The determining factor is all behind the seen analysis on a save which has nothing to do with the Button. Code behind the scenes sets a db value for the status of the Button. We know that the status is being set correctly because activity allowed or disallowed occurs correctly and that the DB settings having been checked are 100% correct as well. There are seven Buttons with 7 Entry Pages that are affected and the users are totally confused when there is no visual direction as to the problem. How do we Fix the Button to change Colors
RadButton, RadPushButton and RadLinkButton can have a custom icon URL and CSS class. When a CSS class is added, the background-image: url() rule is not rendered initially. It does not matter what the class holds, it can even be empty If you hover and leave the button, the icon shows up because the inline rule gets rendered. The RadToggleButton does not manifest this behavior You can find attached below a simple repro and workarounds
Setting the font size of RadioButtonsList does not change its all dimensions as stated in the following article:
https://docs.telerik.com/devtools/aspnet-ajax/controls/radiobuttonlist/mobile-support/elastic-design
Code to reproduce the issue:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.RadRadioButtonList button {
font-size: 26px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
<telerik:RadRadioButtonList ID="RadRadioButtonList1" runat="server" AutoPostBack="False" Height="196px" Skin="MetroTouch" RenderMode="Lightweight">
<Items>
<telerik:ButtonListItem Text="Sample1" Value="1" />
<telerik:ButtonListItem Text="Sample2" Value="2" />
<telerik:ButtonListItem Text="Sample3" Value="3" />
</Items>
</telerik:RadRadioButtonList>
</form>
</body>
</html>