RadTextBox Override HoverStyle

9 posts, 1 answers
  1. Fergal
    Fergal avatar
    23 posts
    Member since:
    Jun 2012

    Posted 06 Jun 2012 Link to this post

    Hi,

    I'm attempting to apply a specific class in CSS to a RadTextBox control (specifically, this is being set in javascript using the .className property). This works great, but whenever I hover over the textbox, the background colour changes back to white, and stays that way, even if I don't click into it, and just move the mouse off it.

    I'm using this as the class:

    html  body  form  .RadInput .missingMandatoryField /*RadTextBox Implementation*/
        { background-color: #F6CBCA }

    What do I need to do to get this to apply to the HoverStyle too (I assume that is the culprit).

    Specifically, my javascript function must apply to multiple types of control (both telerik, and basic html), so I'd rather not have masses of telerik specific code if possible. If it isn't possible, then I'd settle for a method of determining if it is a telerik control in the javascript.

    function fnOnUpdateValidators() {
                for (var i = 0; i < Page_Validators.length; i++) {
                    var val = Page_Validators[i];
                    var ctrl = document.getElementById(val.controltovalidate);
                    if (ctrl != null) {
                        //Remove the existing Class Data.
                        ctrl.className = ctrl.className.replace("missingMandatoryField", "");
                        ctrl.className = ctrl.className.replace(" mandatoryField", "");
     
                        if (!val.isvalid)
                            ctrl.className += " missingMandatoryField";
                        else
                            ctrl.className += " mandatoryField";
                    }
                }
            }

    Thanks
    Fergal
  2. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 07 Jun 2012 Link to this post

    Hello Fergal,

    var ctrl = $find(val.controltovalidate)
     
     
    if (ctrl != null)
    {
        //ctrl is client object of RadInput control.
        //use ctrl.get_styles() method to get style collection and change styles.
     
    }
    else
    {
       ctrl = document.getElementById(val.controltovalidate);
    }
     
    //continue with your code

    See the help topic about InputStyles Client Object.

    Kind regards,
    Vasil
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Fergal
    Fergal avatar
    23 posts
    Member since:
    Jun 2012

    Posted 25 Jul 2012 Link to this post

    Sorry for the late reply, I tried to reply on the day and it wouldn't let me post - since then I have moved on and dealt with other stuff.

    Unfortunately, your code isnt going to do anything. All it's doing is getting the reference to the control a second time, which seems pointless.

    In my code, I am adding an additional CSS class to the control in certain circumstances. Whilst it's fine the moment it happens, if I mouse over the control, it reverts back to the original Style.

    On investigation of the code on the client side, I found this:

    Sys.Application.add_init(function() {
        $create(Telerik.Web.UI.RadTextBox, {"_focused":false,"_postBackEventReferenceScript":"setTimeout(\"__doPostBack(\\\u0027ctl00$r$c$c$txtLastName\\\u0027,\\\u0027\\\u0027)\", 0)","_skin":"Default","clientStateFieldID":"ctl00_r_c_c_txtLastName_ClientState","enabled":true,"styles":{HoveredStyle: ["width:180px;", "riTextBox riHover mandatoryField"],InvalidStyle: ["width:180px;", "riTextBox riError mandatoryField"],DisabledStyle: ["width:180px;", "riTextBox riDisabled mandatoryField"],FocusedStyle: ["width:180px;", "riTextBox riFocused mandatoryField"],EmptyMessageStyle: ["width:180px;", "riTextBox riEmpty mandatoryField"],ReadOnlyStyle: ["width:180px;", "riTextBox riRead mandatoryField"],EnabledStyle: ["width:180px;", "riTextBox riEnabled mandatoryField"]}}, null, null, $get("ctl00_r_c_c_txtLastName"));
    });

    Which, as best I can tell is setting up an object to change the cssClass on the control when it is hovered. What I need to do, is either shut it down, or take control of it so that I can apply an additional class to the HoveredStyle property.
  5. Fergal
    Fergal avatar
    23 posts
    Member since:
    Jun 2012

    Posted 25 Jul 2012 Link to this post

    Never mind, I managed to figure out how to get it working for textboxes.

    For the Textbox, I'm using get_styles() to change the styles. But this apparently is not available on RadComboBoxes - is there a different property I should use?

    Thanks
    Fergal
  6. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 26 Jul 2012 Link to this post

    Hello,

    The ComboBox does not have such collection. You need to style it with some CSS. When the combo is hovered a rcbHovered is applied and you can use it for styling it. See this help topic for more information:
    http://www.telerik.com/help/aspnet-ajax/combobox-appearance-css.html

    Kind regards,
    Vasil
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  7. Fergal
    Fergal avatar
    23 posts
    Member since:
    Jun 2012

    Posted 26 Jul 2012 Link to this post

    Is there a property on the RadCombo objects for setting the css class in javascript? I'm looking for something like className, or class, etc.
  8. Fergal
    Fergal avatar
    23 posts
    Member since:
    Jun 2012

    Posted 26 Jul 2012 Link to this post

    Also, I'm currently using the $telerik.radControls element to identify if the control I have is actually a telerik control, is it possible to use the $telerik object to identify what type of radcontrol it is? (e.g. RadTextBox, RadComboBox, etc)
  9. Answer
    Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 27 Jul 2012 Link to this post

    Hello Fergal,

    You can find the wrapper div element of the rendered ComboBox in your page and set it a Class. Does not need special client side functions for this.

    Yes you can check for particular type using such code:
    if ($find("RadGrid1").constructor == Telerik.Web.UI.RadGrid)
    {
         //the $find("RadGrid1") is RadGrid
    }


    Kind regards,
    Vasil
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  10. Fergal
    Fergal avatar
    23 posts
    Member since:
    Jun 2012

    Posted 30 Jul 2012 Link to this post

    That worked a treat, thanks.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017