I'm using Infragistics XamDataGrid version 15.1
How do I restyle the invalid cells with DarkRed background and lighter red border.
I also would like to restyle the error tooltip with Red background and white foreground (white letters), I the placement of the tooltip to be to the right of the cell.
See the sample mockup below.
Thanks
" alt="Custom Invalid Cell and restyle error tooltip" width="750" height="200" />
Hello Marlon,
Thank you for the description of the invalid value styling behavior you are looking for.
In order to restyle the cells with invalid values, along with their tooltips when using MVVM, I can suggest you implement the IDataErrorInfo interface for the underlying DataItem class (implementing INotifyPropertyChanged is preferable as well) and style the data errors respectively.
XAML:
<!--============ Style for error icon ============-->
<Style TargetType="{x:Type Control}" x:Key="{x:Static igDP:DataPresenterBase.DataErrorIconStyleKey}"> ...</Style>
<!--============ Style for error content ============-->
<DataTemplate x:Key="{x:Static igDP:DataPresenterBase.DataErrorContentTemplateKey}"> ...</DataTemplate>
<!-- ============= Enable support for DataErrorInfo ============= -->
<igDP:XamDataGrid.FieldLayoutSettings> <igDP:FieldLayoutSettings SupportDataErrorInfo="CellsOnly" DataErrorDisplayMode="ErrorIconAndHighlight" /></igDP:XamDataGrid.FieldLayoutSettings>
ViewModel.OrderEntry (DateItem class):
public class OrderEntry : INotifyPropertyChanged, IDataErrorInfo, IEditableObject{ ...}
For more detailed information on using the data error info functionality of the XamDataGrid, I can suggest you take a look at the "xamDataGrid > Display > IDataErrorInfo Support" sample from our WPF Samples Browser and the following topics:
Validate Data as Your End Users Edit a CellEnable Data Error Information SupportStyling Data Errors
I have attached a sample application that demonstrates the approach from above.
If you have any questions, please let me know.
Hi Tacho,
Thank you so much for your reply. I almost got it to work. Here are few changes that I made.
1. I should not display the error icon. So I set the DataErrorDisplayMode ="highlight" only in the xamdatagrid.
2. I added triggers to the tooltip template to show tooltip only if Host.HasDataError = True
3. I added Tooltip property to the DataErrorContentTemplateKey's DataTemplate
It's working fine except half the time I get a blank tooltip when I hover the mouse on an invalid cell if:
1. I first select a cell with no error in the same column (put it in edit mode)
2. Then I move the mouse to an invalid cell either above or below the selected cell within the same column
Do you know why half the time the tooltip is blank?
Below is the modified xaml to display tooltip only if there is error.
<!-- ============ Tooltip with template ============ --> <ToolTip Name="errorTooltip" x:Key="tooltip" Placement="Right" Margin="10,0,0,0"> <ToolTip.Template> <ControlTemplate> <Border Background="#fc5236" BorderBrush="DarkRed" BorderThickness="1"> <TextBlock Text="{Binding Host.DataError}" Foreground="White" Margin="4,2,4,2" /> </Border> <ControlTemplate.Triggers> <MultiDataTrigger> <MultiDataTrigger.Conditions> <Condition Binding="{Binding Host.HasDataError}" Value="True" /> </MultiDataTrigger.Conditions> <Setter Property="Visibility" Value="Visible" /> </MultiDataTrigger> <MultiDataTrigger> <MultiDataTrigger.Conditions> <Condition Binding="{Binding Host.HasDataError}" Value="False" /> </MultiDataTrigger.Conditions> <Setter Property="Visibility" Value="Collapsed" /> </MultiDataTrigger> </ControlTemplate.Triggers> </ControlTemplate> </ToolTip.Template> </ToolTip> <!--============ Style for error content ============--> <DataTemplate x:Key="{x:Static igDP:DataPresenterBase.DataErrorContentTemplateKey}" > <Grid ToolTip ="{StaticResource tooltip}"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <!-- ============= Content presenter to display the cell's value ============= --> <Grid Background="DarkRed" >
<ContentPresenter ContentTemplate="{x:Null}" /> </Grid> <!-- ============= Control for the error icon ============= --> <Control Grid.Column="1" Name="errorIcon" Visibility="Collapsed" Style="{DynamicResource {x:Static igDP:DataPresenterBase.DataErrorIconStyleKey}}" ToolTip="{StaticResource tooltip}"> </Control> <!--============= Border for the highlight ============= --> <Border Name="errorHighlight" BorderBrush="Blue" BorderThickness="0.7" /> </Grid>
Thank you for the feedback and code-snippet you have provided.
Setting data triggers for both when the HasDataError property is True and False can interfere with the neighbouring cells from the field.An approach I can suggest you in order to avoid the empty ToolTip is to set its Visibility to Hidden when the HasDataError is False.
<MultiDataTrigger> <MultiDataTrigger.Conditions> <Condition Binding="{Binding Host.HasDataError}" Value="False" /> </MultiDataTrigger.Conditions><Setter Property="Visibility" Value="Hidden" /></MultiDataTrigger>
Thank you for a quick reply. Yes that fixed the blank tooltip problem.
Another requirement that I have which I am not sure how to implement is when an invalid cell is selected and in edit mode, we also ant to have the dark red background and light red border. Can you show how to implement that?
Thank you.
When the CellValuePresenter is in edit mode, we are actually working with its respective editor (for example: XamNumericEditor, XamTextEditor, etc.).This why in order to change the filling color of our cell in edit mode, we will have to set the Background of the corresponding editor.
For example:
<Style TargetType="igEditors:XamTextEditor"> <Style.Triggers> <MultiDataTrigger> <MultiDataTrigger.Conditions> <Condition Binding="{Binding Path=IsInEditMode, RelativeSource={RelativeSource AncestorType=igDP:CellValuePresenter}}" Value="True" /> <Condition Binding="{Binding Path=HasDataError, RelativeSource={RelativeSource AncestorType=igDP:CellValuePresenter}}" Value="True" /> <Condition Binding="{Binding Path=IsDataErrorDisplayModeHighlight, RelativeSource={RelativeSource AncestorType=igDP:CellValuePresenter}}" Value="True" /> </MultiDataTrigger.Conditions> <Setter Property="Background" Value="DarkRed" /> </MultiDataTrigger> </Style.Triggers></Style> <Style TargetType="igEditors:XamCurrencyEditor"> ...</Style> <Style TargetType="igEditors:XamNumericEditor"> ...</Style>
<Style TargetType="igEditors:XamCurrencyEditor"> ...</Style>
<Style TargetType="igEditors:XamNumericEditor"> ...</Style>
Please note that since the fields could use different editors depending on the data they are containing, we will have to include a Style for all the editors that are used by the fields.I have attached a sample application that demonstrates the approach from above.