How to have RadioButtons with Checkbox Icon Style

[Glenn]

Following code displays as per attached screenshot "Radio Button style" and has Radio like behaviour IE Check a button and the other unchecks:

 

<telerik:RadButton ID="RadButtonTile" runat="server" ToggleType="Radio" ButtonType="ToggleButton" Skin="BlackMetroTouch" Text="tile view"
                       GroupName="Radios" AutoPostBack="false" Checked="true" Height="32px">
                   </telerik:RadButton>
                   <telerik:RadButton ID="RadButtonList" runat="server" ToggleType="Radio" ButtonType="ToggleButton" Skin="BlackMetroTouch" Text="list view"
                       GroupName="Radios" AutoPostBack="false" Height="32px">
                   </telerik:RadButton>

The radio behaviour is what I want, but would prefer to use the square like icons that the Checkbox style provides in BlackMetroTouch skin. I can achieve the desired style as per attached screenshot "Checkbox Style" using the following code.  However the Radio Button behaviour is lost:

<telerik:RadButton ID="RadButtonTile" runat="server" ToggleType="CustomToggle" ButtonType="ToggleButton" Skin="BlackMetroTouch" Text="tile view"
                        GroupName="Radios" AutoPostBack="false" Checked="true" Height="32px">
                        <ToggleStates>
                            <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckboxChecked" />
                            <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckbox" />
                        </ToggleStates>
                    </telerik:RadButton>
                    <telerik:RadButton ID="RadButtonList" runat="server" ToggleType="CustomToggle" ButtonType="ToggleButton" Skin="BlackMetroTouch" Text="list view"
                        GroupName="Radios" AutoPostBack="false" Height="32px">
                        <ToggleStates>
                            <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckbox" />
                            <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckboxChecked" />
                        </ToggleStates>
                    </telerik:RadButton>

 

Is there anyway to include the Radio Button behaviour with the desired checkbox style?

 

Thanks

 

[Ianko]

Hi Glenn,

The second solution is close to what you need. You should just change the ToggleType to Radio and revert the toggle states of the second button:

<telerik:RadButton ID="RadButtonTile" runat="server" ToggleType="Radio" ButtonType="ToggleButton" Skin="BlackMetroTouch" Text="tile view"
    GroupName="Radios" AutoPostBack="false" Checked="true" Height="32px">
    <ToggleStates>
        <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckboxChecked" />
        <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckbox" />
    </ToggleStates>
</telerik:RadButton>
<telerik:RadButton ID="RadButtonList" runat="server" ToggleType="Radio" ButtonType="ToggleButton" Skin="BlackMetroTouch" Text="list view"
    GroupName="Radios" AutoPostBack="false" Height="32px">
    <ToggleStates>
        <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckboxChecked" />
        <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckbox" />

    </ToggleStates>
</telerik:RadButton>

Regards,
Ianko
Telerik

[Glenn]

No doesn't seem to work with ToggleType set to 'Radio" additional cssclasses are being added: "rbToggleRadioChecked" or "rbToggleRadio" which are overriding the icon checkbox image to use the radio button image.

Close but no cigar!

[Ianko]

Hi Glenn,

You can see with this screencast that the suggested markup renders two buttons that are styled as checkboxes but behave as radio buttons—http://screencast.com/t/NsMiswdmiGQV.

If this is not the required behavior, please, provide more details about what is needed.

Regards,
Ianko
Telerik

[Glenn]

Thanks for going to the trouble of doing the screencast.  Still have the same issue, so can only put it down to me having an older version of radtools.  I got it working with a workaround.  Added following to override rbToggleRadio and rbToggleRadioChecked and it is working:

.rbToggleCheckbox {background-position: 0 0 !important; }
.rbToggleCheckboxChecked {background-position: 0 -40px !important; }

Thanks for your help