Trying to change radnumericTextboxes border in javascript

7 posts, 1 answers
  1. Gary B.
    Gary B. avatar
    11 posts
    Member since:
    Jul 2009

    Posted 22 Sep 2009 Link to this post

    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> 

    .
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 23 Sep 2009 Link to this post

    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.
  3. Gary B.
    Gary B. avatar
    11 posts
    Member since:
    Jul 2009

    Posted 23 Sep 2009 Link to this post

    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])
  4. Gary B.
    Gary B. avatar
    11 posts
    Member since:
    Jul 2009

    Posted 24 Sep 2009 Link to this post

    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> 
     

  5. Gary B.
    Gary B. avatar
    11 posts
    Member since:
    Jul 2009

    Posted 24 Sep 2009 Link to this post

    I even tried using "<%=..%>"s now, with the same problem.
    var ActualField;  
    switch (ActualValueField) { 
       case "radnumActualCM":  
           ActualField = $find("<%= radnumActualCM.ClientID %>");  
           break
           ...       

  6. Answer
    Tsvetoslav
    Admin
    Tsvetoslav avatar
    1823 posts

    Posted 26 Sep 2009 Link to this post

    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.
  7. Gary B.
    Gary B. avatar
    11 posts
    Member since:
    Jul 2009

    Posted 01 Oct 2009 Link to this post

    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).

Back to Top