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.
Workaraounds: - Use the Lightweight RenderMode - OR, use the RadCheckBox control instead Steps to reproduce: <telerik:RadSkinManager runat="server" ID="rsm1" ShowChooser="true"></telerik:RadSkinManager> <telerik:RadButton ID="rbFileLink" runat="server" ToggleType="CheckBox" ButtonType="ToggleButton" Checked="true" AutoPostBack="false"> </telerik:RadButton>
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
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.
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" />
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 a RadButton with a PostBackUrl property set is located inside an UpdatePanel, it does not redirect to the PostBackUrl on click and a JavaScript error message is thrown. The workaround is to use: - Either a RadButton (ButtonType="LinkButton") and set its NavigateUrl to the desired page that is to be redirected -OR a RadButton (ButtonType="StandardButton") and use its OnClientClicking event handler to cancel the postback and redirect to the desired page through window.location.href. For example: <script type="text/javascript"> function OnClientClicking(sender, args) { window.location.href = "http://www.bing.com"; args.set_cancel(true); } </script>
Reproduced with latest official (2016.1.113) and internal (2016.2.128) in all browsers. Not reproducible with 2015 Q3 SP1. Code to reproduce the problem: <asp:Button runat="server" ID="GoStep2" OnClick="GoStep2_Click" Text="Next" /> <asp:Panel runat="server" ID="Panel1"> <asp:Button Text="aspButton" runat="server" /> <telerik:RadButton ID="Button1" Text="radButton" runat="server" /> </asp:Panel> protected void Page_Load(object sender, EventArgs e) { Panel1.Enabled = false; } protected void GoStep2_Click(object sender, EventArgs e) { Panel1.Enabled = true; } 1 click the Next button 3. When the page loads after the postback the RadButton remains disabled, unlike the asp:Button.
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>
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>
Two possible workarounds are attached
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(); }
When the focus of the RadButton is set on the server-side, the active element becomes the inner input and not the span wrapper of the button. For the time being the client-side focus can be set. For example: <telerik:RadButton ID="serverFocusBtn" runat="server" RenderMode="Classic" Text="Postback" TabIndex="0" OnClientLoad="btn_load" /> <script type="text/javascript"> function btn_load(btn) { btn.focus(); } </script>