add cssClass dynamically to telerik rad input text box

[towpse]

Having some problems.

I just want to add a css class to a text box, I see you guys expose an addCssClass method.
I use it but I think it seems the class isn't getting applied to the correct element?

I have an input called txtInput.

I grab the input in my javascript and add my css: $find('txtInput').addCssClass('invalid');

When I look in firebug or IE dev toolbar I see three elements that represent the input.

txtInput_text
txtInput
txtInput_Value


It looks like the middle one gets the class but that doesn't render the changes I have in my css Class. If I force the class on txtInput_text using firebug or IE dev toolbar I can see my styles properly rendered. What gives?

Edit: In Firefox I need to completely remove all css classes from the txtInput_text element and only apply mine else none of my styles will render...

Edit: And is there a way to ignore the hover over method that alters the css and gets rid of user added css classes?

Edit: Ideally I'd like to have this invalid class take over and apply to enabled, hovered and disabled states. If I use the addCssClass method it only applies to enabled until i hover over, then my class is lost. Is there a way to change disabled and hovered css classes dynamically in javascript? I see a _styles collection with disabled, hovered etc items but it seems to be private.

thanks


//matt

[towpse]

Can anyone comment on assigning css classes to these rad inputs?

[towpse]

here's what firebug shows me:
conflict is my cssClass. it's applied on the second input tag within the span there. i don't see the style rendered by the browser.

<span id="txtMyValue_wrapper" class="RadInput_Default" style="white-space: nowrap;">
    <input id="txtMyValue_text" class="riTextBox riEnabled" type="text" style="width: 55px;" name="txtAutoClearWaitMinutes_text" value="0"/>
    <input id="txtMyValue" class="rdfd_ conflict" type="text" value="0" style="border: 0pt none ; margin: -18px 0pt 0pt; padding: 0pt; overflow: hidden; visibility: hidden; width: 1px; height: 1px;"/>
    <input id="txtMyValue_Value" class="rdfd_" type="text" value="0" name="txtAutoClearWaitMinutes" style="border: 0pt none ; margin: -18px 0pt 0pt; padding: 0pt; overflow: hidden; visibility: hidden; width: 1px; height: 1px;"/>
    <input id="txtMyValue_ClientState" type="hidden" name="txtAutoClearWaitMinutes_ClientState" autocomplete="off"/>
</span>

unless i apply the style to the first input tag within the span.

i assign the css class like this

$find('txtMyValue');.addCssClass("conflict");

Should I not see my styles? I Should see red text and a greayed out text box background colour.

WHat gives?

[Dimo]

Hi Matt,

The correct way to add a CSS class to a RadTextBox programmatically on the client is the following:

Javascript

var tb = $find(......);
tb.get_styles().EnabledStyle[1] += " conflict";
tb.updateCssClass();


You may need to add the custom CSS class to different styles, e.g. HoverStyle, FocusedStyle, InvalidStyle, etc. In addition, updateCssClass() should be called always after modifying the RadTextBox styles collection on the client.

addCssClass is a method of the Sys.UI.Control type, not ours. It is not supported by RadTextBox, because the element of the control is hidden and not visible by the user.


Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[towpse]

Perfect. Thanks a lot Dimo. Can't wait to try. Cheers.

[towpse]

And similarly how would one go about removing the styles?

thanks

[Dimo]

Hello,

Standard Javascript operations should be used. For example:

tb.get_styles().EnabledStyle[1] = tb.get_styles().EnabledStyle[1].replace("conflict", "");


Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Al]

Hi,

I tried this and it works fine EXCEPT on texboxes that are disabled or readonly, then the style does not get set - is there another way to do this?

[Kostadin]

Hi Al,

Note that in this case you need to add a style to the DisabledStyle collection. Please check out the following code snippet.

tb.get_styles().DisabledStyle[1] += " newClass";

Regards,
Kostadin
Telerik