RadTextBox EnabledStyle backcolor Issue

[RR]

I have a RadTextBox and an ASP checkbox. 
 
<telerik:RadTextBox ID="igcWebTxtEvent" runat="server" Skin="Outlook" Width = "530px"  CausesValidation="True" Font-Bold="False" ForeColor="DarkSlateGray" >
</telerik:RadTextBox>

<asp:CheckBox ID="chkOmitEvent" runat="server" TextAlign="Left" ToolTip="Omit" OnCheckedChanged="chkOmitEvent_CheckedChanged" />

The design time skin for the RadTextBox is "Outlook". Now when the user clicks on the textbox, the background color of the RadTextBox is changed to LemonChiffon. This is done on the client side through JAVASCRIPT which is attached to the checkbox in the behind code in the page load event.

Behined Code:
chkOmitEvent.Attributes.Add("OnClick", "javascript:  return setTextBoxBackgroundColor('" + igcWebTxtEvent.ClientID.ToString() + "','" + chkOmitEvent.ClientID.ToString() + "');");

Client side javascript:
var  originalStyle="";

function setTextBoxBackgroundColor(textBoxID, checkBoxID)
{
      
    var TextBox = $find(textBoxID); 
          
    var retVal = document.getElementById(checkBoxID).checked;
   
    if(retVal)  
    {
        originalStyle =   TextBox.get_styles().EnabledStyle[0];
        TextBox.get_styles().EnabledStyle[0] += "background-color: lemonchiffon;";
    }
    else
        TextBox.get_styles().EnabledStyle[0] = originalStyle;
   
    TextBox.updateCssClass();
    return true;           
}

On the client side everything works like it should, when the the RadTextbox is focused or hovered the color becomes white, which is due to the outlook skin, and otherwise its background color is lemon.

Since this happend at the client side, when the submit button is pressed, there is an event handler on the server side:

All the original values are obtained before postback in the page load event, which happen to be "None".

On Page load before postback:

 if (!Page.IsPostBack){
                    originalEnabledColor = igcWebTxtEvent.EnabledStyle.BackColor;                    originalFocusedColor = igcWebTxtEvent.FocusedStyle.BackColor ;
                    originalHoverColor=igcWebTxtEvent.HoveredStyle.BackColor ;
}

Check box server side event handler:

  protected void chkOmitEvent_CheckedChanged(object sender, EventArgs e)
        {

            if (chkOmitEvent.Checked)
            {                
                igcWebTxtEvent.EnabledStyle.BackColor=  
System.Drawing.Color.LemonChiffon;                                
                               igcWebTxtEvent.FocusedStyle.BackColor = originalFocusedColor;               
igcWebTxtEvent.HoveredStyle.BackColor = originalHoverColor;                
            }
            else
            {
                 igcWebTxtEvent.EnabledStyle.BackColor = originalEnabledColor;
                igcWebTxtEvent.FocusedStyle.BackColor = originalFocusedColor;
                igcWebTxtEvent.HoveredStyle.BackColor = originalHoverColor;

            }

        }

Now the problem is that after the server event is called after postback, all colors become lemon, when hovered/focused. And this behavior propogates since the client side function only sets the enabled color and not the focused/hovered colors. So even when the checkbox is unchecked, the hovered/focused colors remain lemon.

However the "else" part of the if condition (when the skin behavior is restored) 

  else
            {
                 igcWebTxtEvent.EnabledStyle.BackColor = originalEnabledColor;
                igcWebTxtEvent.FocusedStyle.BackColor = originalFocusedColor;
                igcWebTxtEvent.HoveredStyle.BackColor = originalHoverColor;

            }

works fine when it is restored after a postback. And the main observation is that if I do not add the following two lines:
                igcWebTxtEvent.FocusedStyle.BackColor = originalFocusedColor;
                igcWebTxtEvent.HoveredStyle.BackColor = originalHoverColor;
the hover/focused background colors remain lemon whereas the enabled style one is the same as the skin which is blue. Because my understanding was setting the enabled style background color sets all background colors as is the case when I am setting it to Lemon but not the case when I am setting it to its original color. Original backcolor also happens to be "None". Which is why I guess this is happening.  

This is what I am looking for ideally:

1. When a checkbox is checked, the enabled backcolor becomes lemon however focused/hovered remain white
2. When the the checkbox is unchecked, the original skin behavior is restored.

This has to be handled on both client side and server side due to postbacks. On client side it is working fine. However, on the server side it is not.

Is there any other way of acheiving this?  I tried to play around with the style attributes, css attributes on the server side but got nothing to work.

Any help would be greatly appreciated.

Thanks,
Tal

[plamen]

hi :)

The following code example demonstrates how to achieve your goal:

<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>

</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />

    <script type="text/javascript">
    var originalStyle = null;
    function setTextBoxBackGroundColor()
    {
        var radTextBox1 = $find("<%= RadTextBox1.ClientID %>");
        var isChecked = document.getElementById("<%= Checkbox1.ClientID %>").checked;

        if (isChecked)
        {
            originalStyle = radTextBox1.get_styles().EnabledStyle[0];
            radTextBox1.get_styles().EnabledStyle[0] += "background-color: lemonchiffon;";
        }
        else if (originalStyle)
        {
            radTextBox1.get_styles().EnabledStyle[0] = originalStyle;
        }
        radTextBox1.updateCssClass();
    }

    function RadTextBox1_Load(sender, args)
    {
        setTextBoxBackGroundColor();
    }
    </script>
    <input onclick="setTextBoxBackGroundColor();" type="checkbox" id="Checkbox1" runat="server" />
    <telerik:RadTextBox ID="RadTextBox1" runat="server">
        <ClientEvents OnLoad="RadTextBox1_Load" />
    </telerik:RadTextBox>
    <hr />
    <asp:Button ID="Button" runat="server" Text="PostBack" />
    </form>
</body>
</html>

Cheers...
<John:Peel />

[RR]

Thank you for your response.

The only problem I have with using the onload from the client side is that I do not have control ID's of the checkbox and the textbox, as you saw I attach the javascript from code-behind:

checkbox.Attributes.Add("OnClick", "javascript:  return setTextBoxBackgroundColor('" + RadTextBox1.ClientID.ToString() + "','" + checkbox.ClientID.ToString() + "');");

I am working inside of a DotNetNuke (DNN) module, and DNN changes the control ID's and adds some prefix and in some cases a suffix. So the control ID can only be known at runtime.

For example, if it is RadTextBox1 it will change it to:
dnn_ctr389_RadTextBox1

and using something like:
$find(("<%= RadTextBox1.ClientID %>");
does not work and returns a null.

However, this does work:
function setTextBoxBackgroundColor(textBoxID, checkBoxID)
{
      
    var TextBox = $find(textBoxID); 
          
    var retVal = document.getElementById(checkBoxID).checked;
....

But for this approach I need to attach the client script from code-behind.

I tried using something like this but it did not work:
RadTextBox1.Attributes.Add("OnLoad", "javascript:  return setTextBoxBackgroundColor('" + RadTextBox1.ClientID.ToString() + "','" + checkbox.ClientID.ToString() + "');");

I got it to work through the following server code by using Color.Transparent:

 protected void checkbox_CheckedChanged(object sender, EventArgs e)
        {
            if (chkOmitEvent.Checked)
            {
                RadTextBox1.EnabledStyle.BackColor = Color.LemonChiffon;
                RadTextBox1.FocusedStyle.BackColor = Color.Transparent;
                RadTextBox1.HoveredStyle.BackColor = Color.Transparent;
            }
            else
            {
                RadTextBox1.EnabledStyle.BackColor = originalEnabledColor;
                RadTextBox1.FocusedStyle.BackColor = originalFocusedColor;
                RadTextBox1.HoveredStyle.BackColor = originalHoverColor;
            }

        }

Although this does the work for now, but ideally I would want to use a client side solution.

Is there a way to attach the onload event for the RadTextbox through code-behind?

[plamen]

hi:)


Yes, you can attach the onload event for the RadTextBox through code-behind.


Here is an example

        RadTextBox1.ClientEvents.OnLoad = "RadTextBox1_Load";

Regards...
<John:Peel />: