Datagrid Template Column Textbox Validation Error Template

Question

I have a WPF Datagrid which has several columns one of which contains a textbox.

This text box is bound to a value in the view model which performs validation.

The validation works perfectly.

I have a style which allows the user to hover over the text box and show the error as a tooltip, and I leave the standard red border around the text box

When this text box is not within a data grid it works perfectly with the validation causing the border of the text box to turn red

However when part of a datagrid column it seems to set the border for the entire row red!

I have tried setting "Validation.ErrorTemplate="{x:Null}"" on the datagridcell, row and the data grid itself but to no avail.

It seems that the datagrid says "I have a control within this row that is invalid ergo the whole row must be invalid" whereas I just want the control to be shown as invalid.

Can someone help me as to how to accomplish this please?

XAML

 <DataGridTemplateColumn Width="*">
                            <DataGridTemplateColumn.HeaderTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{x:Static languages:Strings.FullNameColumnTitle}" />
                                </DataTemplate>
                            </DataGridTemplateColumn.HeaderTemplate>

                            <DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBox Width="300"
                                             HorizontalAlignment="Left"
                                             Style="{StaticResource DataGridEditableFieldTextBoxStyle}"
                                             Text="{Binding FullName,
                                                            Mode=TwoWay,
                                                            UpdateSourceTrigger=LostFocus,
                                                            NotifyOnValidationError=True,
                                                            ValidatesOnNotifyDataErrors=True}" />

                                </DataTemplate>
                            </DataGridTemplateColumn.CellTemplate>
                        </DataGridTemplateColumn>

Textbox Style

 <!--  A style that makes the text box look like a text block until it has keyboard focus  -->
    <Style x:Key="DataGridEditableFieldTextBoxStyle"
           BasedOn="{StaticResource NormalTextBoxStyle}"
           TargetType="{x:Type TextBox}">
        <Style.Triggers>
            <Trigger Property="IsKeyboardFocused" Value="True">
                <Setter Property="Background" Value="{StaticResource CreamBrush}" />
                <Setter Property="Margin" Value="5" />
                <Setter Property="Foreground" Value="{StaticResource BlackBrush}" />
            </Trigger>
            <Trigger Property="IsKeyboardFocused" Value="False">
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="Foreground" Value="{StaticResource CreamBrush}" />
                <Setter Property="Margin" Value="5" />
                <Setter Property="BorderThickness" Value="0" />
            </Trigger>
            <Trigger Property="Validation.HasError" Value="True">
                <Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors).CurrentItem.ErrorContent, Converter={StaticResource ErrorCodeConverter}}" />
            </Trigger>
        </Style.Triggers>
    </Style>

Current Effect

Required Effect This shows the text box outside of the data grid

AnjumSKhan AnjumSKhan · Accepted Answer · 2015-11-25T15:48:57

0

votes

Remove Width of your TextBox, and change HorizontalAlignment to Stretch.

Datagrid Template Column Textbox Validation Error Template

1 Answers