Changing style of button in RadInput

Question

Hi I have a scenario where I need to change the image of the button in Radinput control based on some criteria.

I have the following styles defined .MyButton { background:url('Error.png') 0 0 no-repeat !important; }

.MyButton_1 { background:url('SupportsNotes.png') 0 0 no-repeat !important; background-color:Red !important }

And my control is

Now if I enter some value that is out of range or in case of dates if the date is future date I want to change the image in the button to 'SupportsNotes.png' from MyButton_1 CSS class. I am unable to find any method to set the css class for the button dynamically.

I want to do this in javascript. Can you please help me on this?

Thanks.

Regards, Ramya

Answer 1

Take a look... Everything explaind very well at: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Answer 2

Thank You. I tried out a few solutions and found one. Am posting it here. May be someone might need this

Radtextbox control

<telerik:RadTextBox ID="RadTextBox4" runat="server" Skin="Outlook" ShowButton="true" ButtonCssClass="MyButton" TextMode="MultiLine" Label="1.2 Name" AccessKey="N" AutoPostBack="false" CausesValidation="true" ClientEvents-OnBlur="test"><telerik:RadTextBox>

test is the method called on Blur

Psuedocode for test method is

1. get the radcontrol RadTextBox4.
2. Check the required conditons for eg: if (txtbox.get_value() != '') { txtbox.Button.className = "MyButton"; }
3. Assign button class dynamically based on the value in the textbox.

In the above function,If regex is not matched we assign invalid button image, If regex is matched we assign a correct button image if there is error we assign error image from the cssclass

.MyButton { background: url('Error.png') 0 0 no-repeat !important; } .MyButton_1 { background: url('help_16x16.png') 0 0 no-repeat !important; } .MyButton_2 { background: url('RegexError.png') 0 0 no-repeat !important; }

So the above code can be used to change images and styles of button in radtextbox dynamically