Validation message styling

7 posts, 1 answers
  1. Michael
    Michael avatar
    23 posts
    Member since:
    Jun 2012

    Posted 19 Apr 2012 Link to this post

    Hello,

    is it possible so validation error on RadMaskedCurrencyInput appears as tool tip and not after the control.

    On the attached image desired effect is on the bottom.
  2. Alex Fidanov
    Admin
    Alex Fidanov avatar
    636 posts

    Posted 23 Apr 2012 Link to this post

    Hi,

     Yes this is possible. You can set a different validate template. This can be done through the attached property Validation.ErrorTemplate property.

    Regards,
    Alex Fidanov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. UI for WPF is Visual Studio 2017 Ready
  4. Michael
    Michael avatar
    23 posts
    Member since:
    Jun 2012

    Posted 23 Apr 2012 Link to this post

    Alex,

    Thanks for the reply. I have implemented the solution that you have suggested and that added the tooltip with error message. But another error message is still displayed nex to the control. How to disable it?
  5. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 26 Apr 2012 Link to this post

    Hello Michael,

    Unfortunately I wasn't able to reproduce the issue. However I feel I might be missing something from your approach and data validation implementation so can you please have a look at the sample I attached and modify it to better demonstrate your scenario. This will allow us to better understand it and suggest a solution.

    Greetings,
    Tina Stancheva
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  6. Michael
    Michael avatar
    23 posts
    Member since:
    Jun 2012

    Posted 26 Apr 2012 Link to this post

    Hi Tina,

    I have modified the solution to the way the validation is done in our application (we are using IDataErrorInfo interface instead of throwing ValidationExceptions). 
    I was able to reproduce the issue I am facing.

    As you can see from attached screenshot if enter value greater than $250 into masked box you will get the error displayed next to the control in red.
    Also if you hover the control with mouse the tooltip is showng the same error.
     
    What we need is to keep the tooltip but get rid of the Error text next to the control. The screen I am working on is too busy and there is simply no space for the validation error.  

    Unfortunately I cannot attach the project so I am posting relevant code here:

    MainWindow.xaml
     
    <Window x:Class="MaskedInput_DataAnnotations.MainWindow"
            xmlns:local="clr-namespace:MaskedInput_DataAnnotations"
            Title="MainWindow"
            Width="525"
            Height="350">
        <Window.DataContext>
            <local:DataValidationViewModel />
        </Window.DataContext>
        <Window.Resources>
            <Style TargetType="{x:Type telerik:RadMaskedCurrencyInput}">
                <Style.Triggers>
                    <Trigger Property="Validation.HasError" Value="true">
                        <Setter Property="ToolTip"  Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}"/>
                        <Setter Property ="BorderBrush" Value="Red" />
                                 
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Window.Resources>
        <StackPanel>
            <telerik:RadMaskedCurrencyInput x:Name="radMaskedCurrencyInput"
                                            Grid.Row="1"
                                            Width="200"
                                            Margin="10, 10, 10, 0"
                                            InputBehavior="Insert"
                                            Value="{Binding Path=DecimalValue,
                                                            ValidatesOnDataErrors=True,
                                                            ValidatesOnExceptions=True,
                                                            NotifyOnValidationError=True,
                                                            UpdateSourceTrigger=PropertyChanged}" />
     
        </StackPanel>
    </Window>

    DataValidationViewModel.cs
    using Telerik.Windows.Controls;
    using System.ComponentModel;
     
    namespace MaskedInput_DataAnnotations
    {
        public class DataValidationViewModel : ViewModelBase, IDataErrorInfo
        {
            private decimal decimalValue;
     
            public decimal DecimalValue
            {
                get { return decimalValue; }
                set
                {
                    decimalValue = value;
                    this.OnPropertyChanged("DecimalValue");
                }
            }
     
     
            public DataValidationViewModel()
            {
                this.DecimalValue = 100;
            }
     
            public string Error
            {
                get
                {
                    string error = string.Empty;
                    if (DecimalValue > 250)
                    {
                        error = "Value cannot be greater than 250.";
                    }
     
                    return error;
                }
            }
     
            public string this[string columnName]
            {
                get
                {
                    string error = string.Empty;
                    switch (columnName)
                    {
                        case "DecimalValue":
                            if (DecimalValue > 250)
                            {
                                error = "Value cannot be greater than 250.";
                            }
                            break;
                        default:
                            break;
                    }
                    return error;
                }
            }
        }
    }


  7. Answer
    Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 01 May 2012 Link to this post

    Hi Michael,

     You can use the Validation.ErrorTemplate  attached property like so:

    <telerik:RadMaskedCurrencyInput x:Name="radMaskedCurrencyInput" Grid.Row="1" Validation.ErrorTemplate="{x:Null}"
    Please let us know if this is suitable for you.

    Kind regards,
    Petar Mladenov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  8. Michael
    Michael avatar
    23 posts
    Member since:
    Jun 2012

    Posted 01 May 2012 Link to this post

    Thanks, Peter, this did the trick!
Back to Top
UI for WPF is Visual Studio 2017 Ready