Articles in this section
Category / Section

How to show the validation tooltip without hovering the red indicator in cell in UWP DataGrid?

2 mins read

You can show the validation tooltip in UWP DataGrid without hovering the red indicator. For this, you need to write style for GridCell and set the ValidationToolTip.IsOpen property as true HasError visual state and false in NoError visual state.

XAML: 

<Style TargetType="syncfusion:GridCell">
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="BorderBrush" Value="Gray" />
                <Setter Property="BorderThickness" Value="0,0,1,1" />
                <Setter Property="Padding" Value="0,0,0,0" />
                <Setter Property="FontFamily" Value=" Segoe UI" />
                <Setter Property="VerticalContentAlignment" Value="Center" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="syncfusion:GridCell">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="IndicationStates">
                                        <VisualState x:Name="HasError">
                                            <Storyboard>
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_InValidCellBorder" Storyboard.TargetProperty="Width">
                                                    <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                                    <EasingDoubleKeyFrame KeyTime="0" Value="10" />
                                                </DoubleAnimationUsingKeyFrames>
                 <!--Set the IsOpen property as True for the ValidationToolTip-->
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationToolTip" Storyboard.TargetProperty="IsOpen">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <x:Boolean>True</x:Boolean>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
 
                                        <VisualState x:Name="NoError">
                                            <Storyboard BeginTime="0">
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_InValidCellBorder" Storyboard.TargetProperty="Width">
                                                    <EasingDoubleKeyFrame KeyTime="0" Value="1" />
                                                    <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                                </DoubleAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_InValidCellBorder" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Collapsed</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                        <!--Set the IsOpen property as False for the ValidationToolTip-->
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationToolTip" Storyboard.TargetProperty="IsOpen">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <x:Boolean>False</x:Boolean>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="BorderStates">
                                        <VisualState x:Name="NormalCell" />
                                        <VisualState x:Name="FooterColumnCell">
                                            <Storyboard BeginTime="0">
                                                <ObjectAnimationUsingKeyFrames BeginTime="0"
                                                                           Duration="1"
                                                                           Storyboard.TargetName="PART_GridCellBorder"
                                                                           Storyboard.TargetProperty="BorderThickness">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1,0,1,1" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
 
 
                                        <VisualState x:Name="BeforeFooterColumnCell">
                                            <Storyboard BeginTime="0">
                                                <ObjectAnimationUsingKeyFrames BeginTime="0"
                                                                           Duration="1"
                                                                           Storyboard.TargetName="PART_GridCellBorder"
                                                                           Storyboard.TargetProperty="BorderThickness">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,1" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border Background="{TemplateBinding CellSelectionBrush}" Visibility="{TemplateBinding SelectionBorderVisibility}" />
                                <Border x:Name="PART_GridCellBorder"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}">
                                    <Grid>
                                        <ContentPresenter Margin="{TemplateBinding Padding}"
                                                      FontFamily="{TemplateBinding FontFamily}"
                                                      FontSize="{TemplateBinding FontSize}"
                                                      Foreground="{TemplateBinding Foreground}" />
                                    </Grid>
                                </Border>
                                <Border Margin="0,0,0,0"
                                    Background="Transparent"
                                    BorderBrush="{TemplateBinding CurrentCellBorderBrush}"
                                    BorderThickness="{TemplateBinding CurrentCellBorderThickness}"
                                    IsHitTestVisible="False"
                                    Visibility="{TemplateBinding CurrentCellBorderVisibility}" />
                                <Border x:Name="PART_InValidCellBorder"
                                    Width="10"
                                    Height="10"
                                    HorizontalAlignment="Right"
                                    VerticalAlignment="Top">
                                    <ToolTipService.ToolTip>
                                        <ToolTip Name="ValidationToolTip"
                                             Background="#FFDB000C"
                                             Placement="Right"
                                             Tag="{TemplateBinding ErrorMessage}"
                                             Template="{StaticResource ValidationToolTipTemplate}" />
 
                                    </ToolTipService.ToolTip>
                                    <Path Data="M0.5,0.5 L12.652698,0.5 12.652698,12.068006 z"
                                      Fill="Red"
                                      Stretch="Fill" />
                                </Border>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
 
            </Style>

 

Note:

This workaround only recommended when you show the validation errors using CurrentCellValidating or RowValidating events. If you set this when built-in validation (using DataErrorInfo, INotifyDataErrorInfo and Data Annotations) enabled, then tooltip will be displayed in all the cells which has error.

 

Conclusion

I hope you enjoyed learning about how to show the validation tooltip without hovering the red indicator in cell.


You can refer to our UWP DataGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our UWP DataGrid example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied