Mouseover changes style of radnumerictextbox

[Yen]

I have a page where I dynamically create a radcombox, a radnumerictextbox with percent type and a radnumerictextbox with currency type.  Depending on the item selected, I would hide one and display the other.  There is an issue where if a numerictextbox was initially hidden in the code behind and then set to display on the client side, it disappears on mouseover.  It looks like it is applying the riHover class.  Any idea how to fix this?  Thanks.

   -- code behind
   if (cboCommType.SelectedValue == "1")
    {
         txtOngoingPer.Style.Add("display", "inline");
         txtOngoingCurrency.Style.Add("display", "none");                               
     }
    else if (cboCommType.SelectedValue != "4")
    {
         txtOngoingPer.Style.Add("display", "none");
         txtOngoingCurrency.Style.Add("display", "inline");                               
     }

  --client side code
  function cboCommType_OnClientSelectedIndexChanged(sender, eventArgs, ctlId) {
     var item = eventArgs.get_item();
     var selectedValue = item.get_value();

     var txtPer = document.getElementById("ctl00_FormContentPlaceHolder_txtOngoingPer_" + ctlId);
     var txtCur = document.getElementById("ctl00_FormContentPlaceHolder_txtOngoingCurrency_" + ctlId);


    if (selectedValue == "1") {
       txtPer.removeAttribute("disabled")
       txtPer.setAttribute("style", "height: 24px; display:inline");
       txtCur.setAttribute("style", "display:none");
    }
    else {
       txtCur.removeAttribute("disabled")
       txtCur.setAttribute("style", "height: 24px; display:inline");
       txtPer.setAttribute("style", "display:none");
    }
}



--initial for txtOngoingPer (mouseover1.png)


--cboCommType select index change to 1 (mouseover2.png)


--after mousing over textbox, the textbox disappears! (mouseover3.png)

[Yen]

I'm using Telerik version 2015.3.1111

[Maria Ilieva]

Hi Yen,

In case you are modifying the input's style on the server and then change it on the client I would suggest you to use the "updateCSSClass" method as shown in the help topic below:

http://docs.telerik.com/devtools/aspnet-ajax/controls/input/appearance-and-styling/using-the-css-class-to-set-the-width

Give this a try and see if this helps.

Regards,
Maria Ilieva
Telerik

[Yen]

Hi Maria.  Thank you so much for the suggestion.  I tried the "updateCssClass" and getting an error message - Object doesn't support property or method 'updateCssClass'. 

 

function cboCommType_OnClientSelectedIndexChanged(sender, eventArgs, ctlId) {
            var item = eventArgs.get_item();
            var selectedValue = item.get_value();

            var txtFee = $("#ctl00_FormContentPlaceHolder_txtFee_" + ctlId);
            var txtPer = $("#ctl00_FormContentPlaceHolder_txtOngoingPer_" + ctlId);
            var txtCur = $("#ctl00_FormContentPlaceHolder_txtOngoingCurrency_" + ctlId);


            if (selectedValue == "4") {
                txtFee.val("");
                txtFee._originalTextBoxCssText = "disabled:disabled";
                txtFee.updateCssClass();

                if (txtPer != null) {
                    txtPer.val("");
                    txtPer._originalTextBoxCssText = "disabled:disabled";
                    txtPer.updateCssClass();
                }

                if (txtCur != null) {
                    txtCur.val("");
                    txtCur._originalTextBoxCssText = "disabled:disabled";
                    txtCur.updateCssClass();
                }
            }
            else {
                txtFee.removeAttr("disabled");

                if (selectedValue == "1") {
                    if (txtPer != null) {
                        txtPer.val(txtCur.val());
                        txtPer._originalTextBoxCssText = "height: 24px; display:inline";
                        txtPer.updateCssClass();

                        txtCur._originalTextBoxCssText = "display:none";
                        txtCur.updateCssClass();
                    }
                }
                else {
                    if (txtCur != null) {
                        txtCur.val(txtPer.val());
                        txtCur._originalTextBoxCssText = "height: 24px; display:inline";
                        txtCur.updateCssClass();

                        txtPer._originalTextBoxCssText = "display:none";
                        txtPer.updateCssClass();
                    }
                }
            }
        }

[Maria Ilieva]

Hello Yen,

Try to access the textbox for example like this:

var txtFee = $find("<%= txtFee.ClientID %>");

 and see how it goes.



Regards,
Maria Ilieva
Telerik

[Yen]

That worked.  Thanks.

[Maria Ilieva]

Hi,

I'm glad that the provided solution helped. Do not hesitate to contact us back in case further assistance is needed.

Regards,
Maria Ilieva
Telerik