RadTextBox Override HoverStyle

[Fergal]

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

[Vasil]

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

[Fergal]

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.

[Fergal]

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

[Vasil]

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

[Fergal]

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.

[Fergal]

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)

[Vasil]

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

[Fergal]

That worked a treat, thanks.