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

RadTextBox Override HoverStyle

8 Answers 165 Views
Input
This is a migrated thread and some comments may be shown as answers.
Fergal
Top achievements
Rank 1
Fergal asked on 06 Jun 2012, 12:39 PM
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

8 Answers, 1 is accepted

Sort by
0
Vasil
Telerik team
answered on 07 Jun 2012, 08:01 AM
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.
0
Fergal
Top achievements
Rank 1
answered on 25 Jul 2012, 02:23 PM
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.
0
Fergal
Top achievements
Rank 1
answered on 25 Jul 2012, 03:54 PM
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
0
Vasil
Telerik team
answered on 26 Jul 2012, 07:28 AM
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.
0
Fergal
Top achievements
Rank 1
answered on 26 Jul 2012, 07:46 AM
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.
0
Fergal
Top achievements
Rank 1
answered on 26 Jul 2012, 08:01 AM
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)
0
Accepted
Vasil
Telerik team
answered on 27 Jul 2012, 12:56 PM
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.
0
Fergal
Top achievements
Rank 1
answered on 30 Jul 2012, 10:05 AM
That worked a treat, thanks.
Tags
Input
Asked by
Fergal
Top achievements
Rank 1
Answers by
Vasil
Telerik team
Fergal
Top achievements
Rank 1
Share this question
or