Search code examples
javascripttelerik

telerik:RadToggleButton colour change based on selected value

I have multiple telerik:RadToggleButton . This can take fourstates named "", "Yes", "N/A","NO". I am trying to find a generic code to change the button color based on the text on the button enter image description here

Following is my aspx code 

 <telerik:RadToggleButton ID="btnToggleB1ops" runat="server" AutoPostBack="False" Font-Size="14px">
                <ToggleStates>
                    <telerik:ButtonToggleState Text=" " />
                    <telerik:ButtonToggleState Text="Yes" />
                    <telerik:ButtonToggleState Text="No" />
                    <telerik:ButtonToggleState Text="N/A" />
                </ToggleStates>
            </telerik:RadToggleButton>
 <telerik:RadToggleButton ID="btnToggleA2" runat="server" AutoPostBack="False" Font-Size="14px">
                <ToggleStates>
                    <telerik:ButtonToggleState Text=" " />
                    <telerik:ButtonToggleState Text="Yes" />
                    <telerik:ButtonToggleState Text="No" />
                    <telerik:ButtonToggleState Text="N/A" />
                </ToggleStates>
            </telerik:RadToggleButton>

A javascript code that can work for any toggle button and show green for yes, red for no, and n/a with blue

Solution

  • Use CSS 

    <style type="text/css">.Checked {
  background-color: white !important;
}

.notChecked {
  background-color: tan !important;
}

</style>
    <telerik:RadToggleButton ID="btnToggleIntroAprv" runat="server" AutoPostBack="False" Font-Size="14px" meta:resourcekey="btnToggle1Resource1">
  <ToggleStates>
    <telerik:ButtonToggleState Text=" " meta:resourcekey="ButtonToggleStateResource4" CssClass="notChecked" />
    <telerik:ButtonToggleState Text="Yes" meta:resourcekey="ButtonToggleStateResource5" />
    <telerik:ButtonToggleState Text="No" meta:resourcekey="ButtonToggleStateResource6" />
    <telerik:ButtonToggleState Text="N/A" />
  </ToggleStates>
</telerik:RadToggleButton>