Code & steps to replicate the issue.
<telerik:RadButton runat="server" ID="RadButton1" Text="Target Button" AutoPostBack="true" EnableViewState="true" />
<br />
<br />
<telerik:RadButton runat="server" ID="RadButton2" Text="Toggle Enabled State and Do PostBack" OnClientClicked="toggleEnabledState" AutoPostBack="true" />
<script>
function toggleEnabledState(sender, args) {
var radButton1 = $find("<%= RadButton1.ClientID %>");
radButton1.set_enabled(!radButton1.get_enabled());
}
</script>
The appearance of RadRadioButtonList is broken when it is used on the same page with RadButton and the set render mode equals to Auto or Classic.
The bug can be reproduced with the following setup:
No render mode set: <telerik:RadRadioButtonList ID="RadRadioButtonList3" runat="server">
<Items>
<telerik:ButtonListItem Text="AllXxXxX" Value="d" />
<telerik:ButtonListItem Text="Phone xxxxxxxxx" Value="P" />
<telerik:ButtonListItem Text="IP/URL xxxxxxxxx" Value="I" />
<telerik:ButtonListItem Text="General xxxxxxxxx" Value="O" />
</Items>
</telerik:RadRadioButtonList>
<telerik:RadButton runat="server" ID="Button1" Text="Button"/>
RenderMode="Classic":
<telerik:RadRadioButtonList ID="RadRadioButtonList3" runat="server">
<Items>
<telerik:ButtonListItem Text="AllXxXxX" Value="d" />
<telerik:ButtonListItem Text="Phone xxxxxxxxx" Value="P" />
<telerik:ButtonListItem Text="IP/URL xxxxxxxxx" Value="I" />
<telerik:ButtonListItem Text="General xxxxxxxxx" Value="O" />
</Items>
</telerik:RadRadioButtonList>
<telerik:RadButton runat="server" ID="Button1" Text="Button"/>
Issue previously reported by others and marked resolved as of R2 2020 in June 2020
However, I am running Chrome 84 with the latest build - 2020.2.617.40.
The issue remains.
Radbutton with type=linkbutton, fails to postback
This button used to open the navigateURL as well as execute codebehind
<telerik:RadButton runat="server" ID="btnPrint" ButtonType="LinkButton" Text="Print Deposit Slip" NavigateUrl="/printform.aspx" Target="_blank" UseSubmitBehavior="false" SingleClick="true" SingleClickText="working..." />
....
End Sub
Hello All,
I'm using a couple of Radbuttons to enable users to download some forms (in Word). This has stopped working in Chromium based browsers for some reason (new Edge, Chrome). It still works in Internet Explorer. No errors in the browser DevTools and no error on the server either.
It also does not work in Cassini (VS2017).
Not sure where to go from here - can anyone confirm/deny?
TIA - Marcus.
code stub:
<telerik:RadButton ButtonType="LinkButton" RenderMode="Lightweight" ID="btnName" runat="server" Text="Button Text" CssClass="TemplBtn" NavigateUrl="~/assets/someform.docx">
<Icon PrimaryIconCssClass="rbDownload" />
</telerik:RadButton>
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.
Add custom Attribute to the RadRadioButtonList control. By the way its not available as a control in the drop down. Andy
http://demos.telerik.com/aspnet-ajax/button/examples/radiosandcheckboxes/defaultcs.aspx?skin=Material
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>
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.
Common scenario is to use PrimaryIconCssClass and SecondaryIconCssClass to decorate custom icons. Common situation is using bootstrap's classes for the glyphicons. In order to workaround this you can use custom CSS rules and define the expected content properties for the before elements. This is an example with bootstrap icons (http://glyphicons.bootstrapcheatsheets.com/). <style> .rbPrimaryIcon.glyphicon-filter:before, .rbSecondaryIcon.glyphicon-filter:before { content: "\e138"; } </style> <telerik:RadButton ID="RadButton2" runat="server" Text="Filter" ButtonType="SkinnedButton" Icon-PrimaryIconCssClass="glyphicon glyphicon-filter" > </telerik:RadButton>
Using RequiredFieldValidator with RadButton (ToogleButton type), RadRadioButtons and RadCheckButtons throws a server exception that cannot be validated. Workaround: ASP.NET: <telerik:RadRadioButtonList ID="RadRadioButtonList1" runat="server" Text="RadRadioButtonList" > <Items> <telerik:ButtonListItem Text="Item 1" Value="0" /> <telerik:ButtonListItem Text="Item 2" Value="1" /> </Items> </telerik:RadRadioButtonList> <asp:CustomValidator ID="CustomButtonListValidator" ErrorMessage="errormessage" runat="server" OnServerValidate="CustomButtonListValidator_ServerValidate" /> C#: protected void CustomButtonListValidator_ServerValidate(object source, ServerValidateEventArgs args) { args.IsValid = (RadRadioButtonList1.SelectedIndex > -1); }
Two possible workarounds are attached
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>
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(); }
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.