RadMaskedTextInput Outter Grid

4 posts, 0 answers
  1. Christopher
    Christopher avatar
    5 posts
    Member since:
    Mar 2015

    Posted 05 Aug 2015 Link to this post

    So I'm trying to customize the RadMaskedTextInput to where the errors line up.

    Right now they popup right next to the textbox associated with them.

     I was thinking this could be possible by putting the textboxes in a fixed width grid and setting the horizontal alignment to left.

     I have attached the current way it looks and the way I want it to look like.

    Any help would be appreciated.

  2. Peshito
    Admin
    Peshito avatar
    496 posts

    Posted 10 Aug 2015 Link to this post

    Hi Christopher,

    This scenario is not supported out of the box. The reason is because the validation message displayed behaves much like a tooltip which is not in the visual tree of the masked control and would require a lot of effort to be achieved.

    Regards,
    Peshito
    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
  3. UI for WPF is Visual Studio 2017 Ready
  4. Christopher
    Christopher avatar
    5 posts
    Member since:
    Mar 2015

    Posted 10 Aug 2015 in reply to Peshito Link to this post

    I actually figured it out and it wasn't hard to implement.

    XAML: 

    <telerik:RadMaskedTextInput
          Validation.ErrorTemplate="{StaticResource TextBoxErrorTemplate}" />

     Error Template Dictionary:

    <ControlTemplate x:Key="TextBoxErrorTemplate">
        <DockPanel HorizontalAlignment="Right" Width="375">
            <Border
                Margin="-2"
                VerticalAlignment="Center"
                BorderBrush="#FFDE3914"
                BorderThickness="2"
                CornerRadius="2" HorizontalAlignment="Left">
                <AdornedElementPlaceholder x:Name="Holder" />
            </Border>
            <Border Padding="1" CornerRadius="1" BorderBrush="Red" Background="Red" Margin="4 2" HorizontalAlignment="Right">
                <Border BorderBrush="White" BorderThickness="1" Background="Red">
                    <TextBlock Text="{Binding ErrorContent}" Foreground="White" FontWeight="Bold" Margin="2" Width="225"/>
                </Border>
            </Border>
        </DockPanel>
    </ControlTemplate>

    I just changed the error from tooltip to textblock. Put it in a big enough container that I could right align the error.

  5. Peshito
    Admin
    Peshito avatar
    496 posts

    Posted 12 Aug 2015 Link to this post

    Hi Christopher,

    I am happy you managed to workaround it in a such easy way. Thank you for sharing this approach with us.

    Regards,
    Peshito
    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