add cssClass dynamically to telerik rad input text box

9 posts, 1 answers
  1. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 07 Aug 2009 Link to this post

    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

  2. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 11 Aug 2009 Link to this post

    Can anyone comment on assigning css classes to these rad inputs?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 11 Aug 2009 Link to this post

    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?

  5. Answer
    Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 12 Aug 2009 Link to this post

    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.
  6. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 12 Aug 2009 Link to this post

    Perfect. Thanks a lot Dimo. Can't wait to try. Cheers.
  7. towpse
    towpse avatar
    224 posts
    Member since:
    Mar 2008

    Posted 12 Aug 2009 Link to this post

    And similarly how would one go about removing the styles?

    thanks
  8. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 13 Aug 2009 Link to this post

    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.
  9. Al
    Al avatar
    203 posts
    Member since:
    Oct 2006

    Posted 18 Sep 2015 in reply to Dimo Link to this post

    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?

  10. Kostadin
    Admin
    Kostadin avatar
    1708 posts

    Posted 23 Sep 2015 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017