We would like to have a radioButtonList with the ButtonListItems displayed as buttons (preferably toggle buttons) as shown in the example URL.
https://docs.telerik.com/devtools/aspnet-ajax/controls/radiobuttonlist/appearance-and-styling/skins
It appears that the RadioButtonList is like other controls in that we just set the Skin. The instructions say "To apply a skin to a RadRadioButtonList control, set its Skin property." which I did, and I see the style change. However, the items do not appear like the screenshot (i.e. as buttons) and remain radio/text items.
I have included my testpage that has a RadioButtonList and Toggle Buttons. It also has a SkinManager so I can see the skin changes taking effect on the controls, but unfortunately they do not appear as buttons in any skin.
Is there some property I am missing?
Thanks for any help
Telerik.Web.UI Version 2019.3.903.40
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestingPage.aspx.vb" Inherits="TelerikQuickQuote.TestingPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadStyleSheetManager runat="server" ID="RadStyleSheetManager1" />
<telerik:RadSkinManager runat="server" ID="RadSkinManager1" ShowChooser="true" RenderMode="Lightweight" />
<hr />
<telerik:RadRadioButtonList ID="RBL_Gender" runat="server"
RenderMode="Lightweight" Layout="Flow" >
<Items>
<telerik:ButtonListItem Text="Male" Value="1" />
<telerik:ButtonListItem Text="Female" Value="2" />
</Items>
</telerik:RadRadioButtonList>
<hr />
<telerik:RadButton ID="TBTN_Male" runat="server" ToggleType="Radio" ButtonType="StandardButton" GroupName="Gender">
<ToggleStates>
<telerik:RadButtonToggleState Text="Male" />
<telerik:RadButtonToggleState Text="Male" />
</ToggleStates>
</telerik:RadButton>
<telerik:RadButton ID="TBTN_Female" runat="server" ToggleType="Radio" ButtonType="StandardButton" GroupName="Gender">
<ToggleStates>
<telerik:RadButtonToggleState Text="Female" />
<telerik:RadButtonToggleState Text="Female" />
</ToggleStates>
</telerik:RadButton>
</div>
</form>
</body>
</html>
2 Answers, 1 is accepted
Rank 1
Correction... I included the wrong version in my original post. We are using
Telerik.Web.UI Version 2019.3.917.45
Telerik.Web.UI.Skins Version 2019.3.917.45
Hi William,
The screenshot inside the Skins articles for RadRadioButtonList and RadCheckBoxList is taken with RadPushButton.
RadRadioButtonList does not offer button-like rendering and a possible solution is to use RadButton with ToggleState as you have already found out:
<telerik:RadButton ID="TBTN_Male" runat="server" ToggleType="Radio" ButtonType="StandardButton" GroupName="Gender">
<ToggleStates>
<telerik:RadButtonToggleState Text="Male" />
<telerik:RadButtonToggleState Text="Male" />
</ToggleStates>
</telerik:RadButton>
<telerik:RadButton ID="TBTN_Female" runat="server" ToggleType="Radio" ButtonType="StandardButton" GroupName="Gender">
<ToggleStates>
<telerik:RadButtonToggleState Text="Female" />
<telerik:RadButtonToggleState Text="Female" />
</ToggleStates>
</telerik:RadButton>Please let me know if you have any other questions.
Regards,
Rumen
Progress Telerik