RadNumericTextBox not working with RangeValidator

[johnv]

Hey Telerik Community,

I have what I hope is a quick question,

I am creating a group of custom controls for my project. I am working on a numeric text box that includes range validation, optional required field validation, and built in tool tips.

I have the tooltips and required field validation in and working, but the range validation is proving to be well, not so simple. I have done some research and all looks good for using integer values, but I have the same result whether I am using integer or double. When I trigger a validation failure in the debugger, the RadNumericTextBox reacts as expected, but the error message is not displayed.

<telerik:RadNumericTextBox ID="txtField" runat="server" Type="Number"
        NumberFormat-AllowRounding="false" NumberFormat-GroupSeparator=""
        AllowOutOfRangeAutoCorrect="false">
    </telerik:RadNumericTextBox>
    <asp:RequiredFieldValidator ID="rfvField" runat="server" ControlToValidate="txtField"
        Display="Dynamic">
    </asp:RequiredFieldValidator>
    <asp:RangeValidator ID="rgvField" runat="server" ControlToValidate="txtField"
        Display="Dynamic" Type="Double" ErrorMessage="error!" Text="*">
    </asp:RangeValidator>
    <telerik:RadToolTip ID="ttHelp" runat="server" AnimationDuration="300" ShowDelay="200"
        EnableShadow="true" HideDelay="1" RelativeTo="Element"
        TargetControlID="txtField" Animation="Slide" Position="BottomCenter" />

Any thoughts?

[Dimo]

Hi John,

As far as I can see, you should add the following properties:

1) ErrorMessage for the required validator
2) MinimumValue and MaximumValue for the range validator
3) Text for the RadToolTip

After doing the above, everything works as expected on my side.

All the best,
Dimo
the Telerik team

[johnv]

I am sorry I should have been more clear, I am actually adding these (and other) attributes in code as this is a web user control; however, I did add the "missing" attributes to the controls as you suggested and am still experiencing the same issue.

Its not really complete, but here is my codebehind file.

namespace YourNamespace
{
    public partial class NumericTextBox : System.Web.UI.UserControl
    {
        #region Event Handlers

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                if (string.IsNullOrEmpty(Caption)) { lblCaption.Visible = false; }
                if (string.IsNullOrEmpty(Skin)) { txtField.Skin = "Simple"; }
                if (string.IsNullOrEmpty(ToolTip)) { ttHelp.Visible = false; }
                if (string.IsNullOrEmpty(Skin)) { ttHelp.Skin = "Simple"; }
                if (string.IsNullOrEmpty(RequiredErrorMessage)) { rfvField.Visible = false; }
                if (string.IsNullOrEmpty(RangeErrorMessage)) { rgvField.Visible = false; }
                if (string.IsNullOrEmpty(ValidationGroup))
                {
                    txtField.ValidationGroup = "Save";
                    rfvField.ValidationGroup = "Save";
                    rgvField.ValidationGroup = "Save";
                }
                rgvField.MinimumValue = MinValue.ToString();
                rgvField.MaximumValue = MaxValue.ToString();
            }
        }

        #endregion

        #region Public Properties

        public string Caption
        {
            get { return lblCaption.Text; }
            set { lblCaption.Text = value; }
        }

        public string Text
        {
            get { return txtField.Text; }
            set { txtField.Text = value; }
        }

        public bool EnableToolTip
        {
            get { return ttHelp.Enabled; }
            set { ttHelp.Enabled = value; }
        }

        public string ToolTip
        {
            get { return ttHelp.Text; }
            set { ttHelp.Text = value; }
        }

        public int DecimalPlaces
        {
            get { return txtField.NumberFormat.DecimalDigits; }
            set { txtField.NumberFormat.DecimalDigits = value; }
        }

        public double MinValue
        {
            get
            {
                try
                {
                    return Convert.ToDouble(txtField.MinValue);
                }
                catch { return 0; }
            }
            set { txtField.MinValue = value; }
        }

        public double MaxValue
        {
            get
            {
                try
                {
                    return Convert.ToDouble(txtField.MaxValue);
                }
                catch { return 0; }
            }
            set { txtField.MaxValue = value; }
        }

        public int MaxLength
        {
            get { return txtField.MaxLength; }
            set { txtField.MaxLength = value; }
        }

        public string Skin
        {
            get { return txtField.Skin; }
            set
            {
                txtField.Skin = value;
                ttHelp.Skin = value;
            }
        }

        public bool Required
        {
            set
            {
                if (value && !lblCaption.Text.Contains("*"))
                {
                    lblCaption.Text += " <span style='color: #CC0000;'>*</span> ";
                }
                rfvField.Visible = value;
            }
        }

        public string ValidationGroup
        {
            get { return rfvField.ValidationGroup; }
            set
            {
                txtField.ValidationGroup = value;
                rfvField.ValidationGroup = value;
                rgvField.ValidationGroup = value;
            }
        }

        public string RequiredErrorMessage
        {
            get { return rfvField.ErrorMessage; }
            set { rfvField.ErrorMessage = value; }
        }

        public string RangeErrorMessage
        {
            get { return rgvField.ErrorMessage; }
            set { rgvField.ErrorMessage = value; }
        }

        #endregion
    }
}

Does the fact that I am assigning these attributes in the codebehind make a difference for whether or not the controls work?

[Dimo]

Hi John,

The problem is that the MinValue and MaxValue of the RadNumericTextBox match the MinValue and MaxValue of the range validator. If you enter an out-of-range value in the RadNumericTextBox, it clears its internal value (reported by its API and to the validator), so the range validator has nothing to validate. That's why the range validator error message never appears.

If you intend to use a range validator for the RadNumericTextBox, then do not set any MinValue and MaxValue to the RadNumericTextBox.


Best wishes,
Dimo
the Telerik team

[johnv]

Naturally...

So the final question becomes how do I make the textbox show the invalid css when I encounter a failed validation?

[Dimo]

Hi John,

You can show the RadNumericTextBox' invalid style manually with Javascript like this:

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" Value="6">
    <ClientEvents OnValueChanged="checkValue" OnBlur="checkValue" OnFocus="clearInvalidState" />
</telerik:RadNumericTextBox>

<asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="RadNumericTextBox1" MinimumValue="5" MaximumValue="10"
    ErrorMessage="ErrorMessage" CultureInvariantValues="true" Type="Integer" />

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">

function checkValue(sender, args)
{
    var tbValue = sender.get_value();
    var rv = <%= RangeValidator1.ClientID %>;

    if (tbValue && (tbValue > parseFloat(rv.maximumvalue) || tbValue < parseFloat(rv.minimumvalue)))
    {
        sender._holdsValidNumericValue = false;
        sender.updateCssClass();
    }

}

function clearInvalidState(sender, args)
{
    sender._holdsValidNumericValue = true;
    sender.updateCssClass();
}

</script>
</telerik:RadCodeBlock>

</form>
</body>
</html>

Greetings,
Dimo
the Telerik team