This is a migrated thread and some comments may be shown as answers.

Display RadioButtonList Items as Buttons

2 Answers 186 Views
RadioButtonList
This is a migrated thread and some comments may be shown as answers.
William
Top achievements
Rank 1
William asked on 13 Dec 2019, 03:36 PM

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

Sort by
0
William
Top achievements
Rank 1
answered on 13 Dec 2019, 03:40 PM

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

 

0
Rumen
Telerik team
answered on 17 Dec 2019, 01:24 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
RadioButtonList
Asked by
William
Top achievements
Rank 1
Answers by
William
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or