Mouseover changes style of radnumerictextbox

7 posts, 0 answers
  1. Yen
    Yen avatar
    7 posts
    Member since:
    Mar 2011

    Posted 09 Feb Link to this post

    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)
  2. Yen
    Yen avatar
    7 posts
    Member since:
    Mar 2011

    Posted 09 Feb in reply to Yen Link to this post

    I'm using Telerik version 2015.3.1111
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 12 Feb Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Yen
    Yen avatar
    7 posts
    Member since:
    Mar 2011

    Posted 12 Feb in reply to Maria Ilieva Link to this post

    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();
                        }
                    }
                }
            }

  6. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 17 Feb Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Yen
    Yen avatar
    7 posts
    Member since:
    Mar 2011

    Posted 18 Feb in reply to Maria Ilieva Link to this post

    That worked.  Thanks.
  8. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 23 Feb Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017