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

add cssClass dynamically to telerik rad input text box

8 Answers 471 Views
Input
This is a migrated thread and some comments may be shown as answers.
towpse
Top achievements
Rank 2
towpse asked on 07 Aug 2009, 08:12 PM
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

8 Answers, 1 is accepted

Sort by
0
towpse
Top achievements
Rank 2
answered on 11 Aug 2009, 05:36 PM
Can anyone comment on assigning css classes to these rad inputs?
0
towpse
Top achievements
Rank 2
answered on 11 Aug 2009, 07:10 PM
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?

0
Accepted
Dimo
Telerik team
answered on 12 Aug 2009, 10:28 AM
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.
0
towpse
Top achievements
Rank 2
answered on 12 Aug 2009, 01:29 PM
Perfect. Thanks a lot Dimo. Can't wait to try. Cheers.
0
towpse
Top achievements
Rank 2
answered on 12 Aug 2009, 01:35 PM
And similarly how would one go about removing the styles?

thanks
0
Dimo
Telerik team
answered on 13 Aug 2009, 12:49 PM
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.
0
Al
Top achievements
Rank 1
Iron
Iron
Iron
answered on 18 Sep 2015, 02:17 PM

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?

0
Kostadin
Telerik team
answered on 23 Sep 2015, 06:44 AM
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
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
Tags
Input
Asked by
towpse
Top achievements
Rank 2
Answers by
towpse
Top achievements
Rank 2
Dimo
Telerik team
Al
Top achievements
Rank 1
Iron
Iron
Iron
Kostadin
Telerik team
Share this question
or