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

Change Text Color When Button is Clicked

2 Answers 207 Views
Button
This is a migrated thread and some comments may be shown as answers.
Mark Kucera
Top achievements
Rank 1
Mark Kucera asked on 06 Dec 2013, 09:45 PM
I'm in the process of converting all my <asp:radiobutton> and <asp:Checkbox> controls over to <telerik:radbutton> setting ButtonType="ToggleButton"  and ToggleType="CheckBox" || ToggleType="Radio".  We're making these updates so that the controls can be custom-styled using CSS. This is working well but we're running into just one issue.  What we're struggling with is figuring out how to change the color of the checkbox text based on whether the checkbox is checked or not checked.  I've turned on every optional CssClass attribute to see what's rendered in the output, but i don't see any class name changes to the <span> around the text element.

Regardless of whether the checkbox is checked or not-checked, the output HTML looks like:

<span class="rbText rbSecondary">
    This is my checkbox text.
</span>

I can see that the <span> tag that contains the primary icon has a class that changes from rbToggleCheckbox to rbToggleCheckboxChecked when the checkbox is checked.  How can we accomplish the samething with the text portion of the checkbox?  I was really kind of expecting to see something like a SelectedCss attribute or something like some of your other controls have.  I experimented with the PressedCssClass attribute but that only seems to be active for a split second while the item is being pressed.  if the page loads and the checkbox is initially checked that class isn't referenced. 

Any advice you have for us is greatly appreciated.
Thanks!
-Mark

2 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 09 Dec 2013, 06:32 AM
Hi Mark Kucera,

Please have a look into the following code snippet to change the color of text based on the RadButton is checked or not.

ASPX:
<telerik:RadButton ID="btnToggle" runat="server" ToggleType="CheckBox" ButtonType="LinkButton">
    <ToggleStates>
        <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked"
            CssClass="Checked" />
        <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleCheckbox"
            CssClass="notChecked" />
    </ToggleStates>
</telerik:RadButton>

CSS:
<style type="text/css">
    .Checked
    {
        color: Blue !important;
    }
    .notChecked
    {
        color: Red !important;
    }
</style>

Hope this will helps you.
Thanks,
Shinu.
0
Mark Kucera
Top achievements
Rank 1
answered on 09 Dec 2013, 04:19 PM
This looks perfect. I would not have ever tried changing the ButtonType from ToggleButton to LinkButton.  But that seems to then provide the hooks need to be able to modify the text.

Thanks!
-Mark
Tags
Button
Asked by
Mark Kucera
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Mark Kucera
Top achievements
Rank 1
Share this question
or