How to have RadioButtons with Checkbox Icon Style

5 posts, 0 answers
  1. Glenn
    Glenn avatar
    47 posts
    Member since:
    Nov 2011

    Posted 24 Jul 2015 Link to this post

    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

     

  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 29 Jul 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Glenn
    Glenn avatar
    47 posts
    Member since:
    Nov 2011

    Posted 29 Jul 2015 in reply to Ianko Link to this post

    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!

  5. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 29 Jul 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Glenn
    Glenn avatar
    47 posts
    Member since:
    Nov 2011

    Posted 29 Jul 2015 in reply to Ianko Link to this post

    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 

     

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017