Styling the message displayed by a custom validator for a masked numeric input control

2 posts, 0 answers
  1. Rod
    Rod avatar
    71 posts
    Member since:
    Jan 2011

    Posted 26 Jul 2013 Link to this post

    I've put a RadMaskedNumericInput control onto window. To that I wanted to add validation. Here's the custom class I came up with:

    public class ByteValidation : ValidationRule
        private byte min = 0;
        private byte max = byte.MaxValue;
        //The Minimum and Maximum values are there to restrict how low and how high the
        //stored value can be.
        public byte Minimum
            get { return min; }
            set { min = value; }
        public byte Maximum
            get { return max; }
            set { max = value; }
        public string ErrorMessage
        { get; set; }
        public override ValidationResult Validate(object value, System.Globalization.CultureInfo cultureInfo)
            if (value == null)
                return new ValidationResult(true, null);
            byte tmp;
                double dTmp = (double)value;
                tmp = (byte)dTmp;
            catch (Exception)
                return new ValidationResult(false, "Invalid value");
            if (tmp < min || tmp > max)
                return new ValidationResult(false, ErrorMessage);
            return new ValidationResult(true, null);

    and here's the XAML:

    <telerik:RadMaskedNumericInput Mask="##" Margin="550,0,0,0" Grid.Row="1" FontSize="16" VerticalAlignment="Bottom" FontFamily="Century Gothic">
            <Binding Path="DaysPaidLast30">
                    <local:ByteValidation Minimum="0" Maximum="30" ErrorMessage="Value must be between 0 and 30." />

    This all works fine.

    In testing I discovered that if I put in some invalid numeric data, then I'll get a gold border and a popup message. Is that color standard with the RadMaskedNumericInput? Can that be styled?

  2. Pavel R. Pavlov
    Pavel R. Pavlov avatar
    1182 posts

    Posted 31 Jul 2013 Link to this post

    Hi Rod,

    Let me make a quick clarification. When you input an invalid number, the control visualizes a red border. You actually see it orange when you hover or focus the RadMaskedNumericInput, because the control visualizes an yellow border when it is in Focused state. Please note that when the focus is somewhere else the border remains red.

    In order to customize that border you can change the Focused state of the control. To do that, you can extract and edit the default template of the control (read more).

    Please give this approach a try and let me know if it works for you.

    Pavel R. Pavlov
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
Back to Top