Trying to change radnumericTextboxes border in javascript

[Gary B.]

My goal is to have the textboxes border change from "none" to "solid" or back again based on onclick of an associated checkbox.
The problem is that the border is not changing, or not staying set depending on how I do it.
I'll start with the javascript because that is probably the source of the problem:

function onCheckboxChanged(CheckboxField, ComputedValueField, ActualValueField) {
    //Checkbox has been checked
    var ActualField = document.getElementById(ActualValueField);
    alert(ActualField.id);
    if (document.getElementById(CheckboxField).checked == true) {
        var ComputedVal = document.getElementById(ComputedValueField).value;
        ActualField.value = ComputedVal;
        ActualField.readOnly = false;
        ActualField.style.border = "medium solid";
    }
    else {
        ActualField.value = "0";
        ActualField.readOnly = true;
        ActualField.style.border = "none";
    }
    //alert(ActualField.style.border);
    CalculateActualTotals();
}

There are no exceptions thrown, and the radnumericTextbox does turn readOnly or not readOnly based on the checkbox, but I can't see the border change. When I did an alert on the ActualField.style.border it did say "medium solid -moz-use-text-color" (obviously I am testing Firefox, but it also has to work for IE 7+).
After looking at the rendered source I decided to try:

var ActualField = document.getElementById(ActualValueField + "_text");

which did show the border, but only until I moused over it (I have no other events set other than what I've mentioned here), so that doesn't really seem like a solution.
For reference here is one line of my table, they are all the same just with different names.

<tr>
    <td>
        <asp:CheckBox ID="chkCM" runat="server" onclick="onCheckboxChanged('chkCM','radnumComputedCM','radnumActualCM')"/>
    </td>
    <td>
        <asp:TextBox ID="txtAccNameCM" runat="server" BorderStyle="None" ReadOnly="true"/>
    </td>
    <td>
        <telerik:RadNumericTextBox ID="radnumComputedCM" runat="server" BorderStyle="None" ReadOnly="true" MaxValue="9999.99"
             EmptyMessage="$" NumberFormat-DecimalDigits="2" MinValue="0" CssClass="copysmall" Width="60px">
            <NumberFormat DecimalDigits="2" PositivePattern="$n" />
        </telerik:RadNumericTextBox>
    </td>
    <td>
        <telerik:RadNumericTextBox ID="radnumActualCM" runat="server" BorderStyle="None" ReadOnly="true" MaxValue="9999.99"
             EmptyMessage="$" NumberFormat-DecimalDigits="2" MinValue="0" CssClass="copysmall" Width="60px">
            <NumberFormat DecimalDigits="2" PositivePattern="$n" />
        </telerik:RadNumericTextBox>
    </td>
</tr>

.

[Shinu]

Hi Gary,

I tried the following approach in order to show/hide the border of RadNumericTextBox. Give a try with this.

ASPX:

<telerik:RadNumericTextBox ID="radnumActualCM" runat="server" MaxValue="9999.99"
    EmptyMessage="$" NumberFormat-DecimalDigits="2" MinValue="0" CssClass="copysmall">
    <NumberFormat DecimalDigits="2" PositivePattern="$n" />
</telerik:RadNumericTextBox>
<asp:CheckBox ID="chkCM" runat="server" onclick="onCheckboxChanged(this)" />

JavaScript:

<script type="text/javascript">
function onCheckboxChanged(checkbox)
{
    var Input = $find("<%= radnumActualCM.ClientID %>");
    if(checkbox.checked)
    {
        Input._textBoxElement.style.cssText = 'border:none';
    }
    else
    {
        Input._textBoxElement.style.cssText = 'border:1px solid';
    }
}
</script>

-Shinu.

[Gary B.]

The problem is that I have many of these sets of checkboxes and textboxes and I don't want a unique method for each (I don't want to use $find unless I can pass the name in) I just want to pass the object name, this is javascript after all, I should be able to access any element by it's id.
I tried the

....cssText = 'border:none';
and
....cssText = 'border:1px solid';

but as long as I am using

var ActualField = document.getElementById(ActualValueField + "_text");
or
var ActualField = document.getElementById(ActualValueField);

it does not have the desire effect.
With the former, the border disappears on mouse hover.
With the latter the border shows up on an element after the text value. (i.e. [Textbox]     [blank html element that has a border now when the checkbox is checked])

[Gary B.]

Ok, I guess I am able to use $find without the "<%=..%>"s which was the key.
Here's what I have now.

function onCheckboxChanged(CheckboxField, ComputedValueField, ActualValueField) {
    var ActualField = $find(ActualValueField);
    if (document.getElementById(CheckboxField).checked == true) {
        var ComputedVal = document.getElementById(ComputedValueField).value;
        ActualField.value = ComputedVal;
        ActualField.readOnly = false;
        ActualField._textBoxElement.style.cssText = "border:1px solid";
    }
    else {
        ActualField.value = "0";
        ActualField.readOnly = true;
        ActualField._textBoxElement.style.cssText = "border:none";
    }
}

However, the border still disappears when I mouseover it. Are there any guesses why, I still am at a loss there.
Here's what one of the lines looks like rendered in firefox if that helps (it goes checkbox, textbox, radnumeric, radnumeric):

<tr>
<td>
    <input id="chkCM" name="chkCM" onclick="onCheckboxChanged('chkCM','radnumComputedCM','radnumActualCM');" type="checkbox">
</td>
<td>
    <input name="txtAccessorialNameCM" value="C/M" readonly="readonly" id="txtAccessorialNameCM" style="border-style: none;" type="text">
</td>
<td>
<!-- 2009.2.701.20 -->
    <span id="radnumComputedCM_wrapper" class="RadInput RadInput_Default" style="white-space: nowrap;">
        <input value="$" maxlength="4" id="radnumComputedCM_text" name="radnumComputedCM_text" class="riTextBox riEmpty copysmall" readonly="readonly" style="border-style: none; width: 50px;" type="text"><input style="border: 0pt none ; margin: -18px 0pt 0pt; padding: 0pt; overflow: hidden; visibility: hidden; width: 1px; height: 1px;" id="radnumComputedCM" class="rdfd_" value="" type="text"><input style="border: 0pt none ; margin: -18px 0pt 0pt; padding: 0pt; overflow: hidden; visibility: hidden; width: 1px; height: 1px;" id="radnumComputedCM_Value" class="rdfd_" name="radnumComputedCM" value="" type="text">
        <input autocomplete="off" value="{&quot;enabled&quot;:true,&quot;emptyMessage&quot;:&quot;$&quot;,&quot;minValue&quot;:0,&quot;maxValue&quot;:70368744177664}" id="radnumComputedCM_ClientState" name="radnumComputedCM_ClientState" type="hidden">
    </span>
</td>
<td>
    <span id="radnumActualCM_wrapper" class="RadInput RadInput_Default" style="white-space: nowrap;">
        <input value="$0.00" maxlength="4" id="radnumActualCM_text" name="radnumActualCM_text" class="riTextBox riRead copysmall" readonly="readonly" style="border-style: none; width: 50px;" type="text"><input style="border: 0pt none ; margin: -18px 0pt 0pt; padding: 0pt; overflow: hidden; visibility: hidden; width: 1px; height: 1px;" id="radnumActualCM" class="rdfd_" value="0" type="text"><input style="border: 0pt none ; margin: -18px 0pt 0pt; padding: 0pt; overflow: hidden; visibility: hidden; width: 1px; height: 1px;" id="radnumActualCM_Value" class="rdfd_" name="radnumActualCM" value="0" type="text">
        <input autocomplete="off" value="{&quot;enabled&quot;:true,&quot;emptyMessage&quot;:&quot;$&quot;,&quot;minValue&quot;:0,&quot;maxValue&quot;:70368744177664}" id="radnumActualCM_ClientState" name="radnumActualCM_ClientState" type="hidden">
    </span>
</td>
</tr>

[Gary B.]

I even tried using "<%=..%>"s now, with the same problem.

var ActualField;
switch (ActualValueField) {
   case "radnumActualCM":
       ActualField = $find("<%= radnumActualCM.ClientID %>");
       break;
       ...

[Tsvetoslav]

Hello Gary,

Please, refer to my answer to your support ticket # 245849. For the benefit of other readers who might find their way here, I am attaching the sample to this post as well.

Regards,
Tsvetoslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Gary B.]

Thank you for the help. I never would have found the pageLoad, and now I will probably be able to use that other places.
For benefit of other readers here is my resulting script.

function pageLoad(sender, args) {
    onCheckboxChanged('chkCM', 'radnumComputedCM', 'radnumActualCM');
    // Copy this line for each row of check, computed radnum, and actual radnum.
}

function onCheckboxChanged(CheckboxField, ComputedValueField, ActualValueField) {
    //Checkbox has been checked or unchecked.
    try{
        var ActualField = $find(ActualValueField);
        if (document.getElementById(CheckboxField).checked == true) {
            var ComputedVal = document.getElementById(ComputedValueField).value;
            // Alternatively you can try: $find(ActualValueField + "_text").disabled "";
            ActualField._textBoxElement.disabled = "";
            ActualField._textBoxElement.style.cssText = "border:1px solid;width:60px";
            for (var style in ActualField.get_styles()) {
                ActualField.get_styles()[style][0] = 'border:1px solid;width:60px';
            }
        }
        else {
            ActualField._textBoxElement.disabled = "disabled";
            ActualField._textBoxElement.style.cssText = "border:none;width:60px";

            for (var style in ActualField.get_styles()) {
                ActualField.get_styles()[style][0] = 'border-style:none;width:60px';
            }
        }
    } catch (err) {
        // Display the error and the names of the fields that were passed in.
        // This should only happen when I misspell one of the control names.
        alert(err+': '+CheckboxField+','+ComputedVal+','+ActualValueField);
    }
}

I am using the pageLoad to set the controls' look properly if the check is checked when the user returns to the page, but it also shows the same code that I put in the onclick for the checkbox in each row (i.e. just <tr> not GridRow).