Hi Telerik,
We have a requirement to change the background color of a row based on changing values from a group of data, much like the alternating row color. However, instead of alternating row color based on every other row or every N row or based on some bound value, we need to alternate row background colors when values of 2 or more column values have changed.
We were hoping to find a solution that is built-in to the WPF RadGrid control and/or has fast performance. We are using MVVM.
Please find the attached image for an example of the intended behavior.
Please advise.
Kind regards
8 Answers, 1 is accepted

Hi Telerik,
To be clear, the row background color change is triggered by the fact that there are different values in 2 or more columns than the prior row.
Kind regards

Hi Telerik,
Please find the attached image for a more descriptive example of the desired behavior.
Kind regards
In order to achieve the desired result, you can make use of RadGridView's RowStyleSelector property. Inside the SelectStyle method, you can get ahold of the current and previous items and based on the objects' properties set a specific style.
public
class
RowStyleSelector : StyleSelector
{
public
override
Style SelectStyle(
object
item, DependencyObject container)
{
var currentItem = item
as
DataItem;
// the type of your business objects
var gridView = (container
as
FrameworkElement).ParentOfType<RadGridView>();
var items = gridView.Items;
var currentRowIndex = items.IndexOf(currentItem);
if
(currentRowIndex > 0)
{
var previousRow = items[currentRowIndex - 1];
var previousItem = previousRow
as
Club;
if
(ArePropertiesDifferent(item, previousItem))
// your custom method for comparing the objects
{
return
ModifiedRowStyle;
}
else
{
return
NormalRowStyle;
}
}
return
NormalRowStyle;
}
public
Style ModifiedRowStyle {
get
;
set
; }
public
Style NormalRowStyle {
get
;
set
; }
}
Please let me know whether such an approach would work for you.
Regards,
Dilyan Traykov
Progress Telerik
Hi,
I want to know how to show different colors for the column groups(Header and columns must have same color).
Our req: all columns that belong to the same component type are grouped together and displayed with the same color.
Thanks in advance!

Hi Dilyan,
Thank you very much - we will give it a try.
Kind regards

Hi Telerik/Dilyan,
Thank you very much - we've implemented the solution suggested above.
Could you please advise on the following?
A) The row colors don't seem to "stick" are erratic when scrolling the RadGridView. We are binding to properties of our custom object which implements INotifyPropertyChanged and IDataErrorInfo.
B) We have drag/drop implemented in an existing RowStyle declared in XAML. When overriding the StyleSelector, we can no longer have the ability to drag/drop rows. Is there a different/programmatic way to set the following XAML, or give the ability to drag/drop while implementing the custom StyleSelector?
<Setter Property="telerik:DragDropManager.AllowDrag" Value="True" />
<Setter Property="telerik:DragDropManager.TouchDragTrigger" Value="TapAndHold"/>
Here is the RadGridView's XAML:
<telerik:RadGridView x:Name="grdName"
ItemsSource="{Binding Data}" SelectionMode="Single"
EditTriggers="CellClick"
ShowGroupPanel="False"
IsFilteringAllowed="False"
RowIndicatorVisibility="Collapsed" behavior:RadGridScrollIntoViewAsyncBehavior.IsEnabled="True"
CanUserReorderColumns="False"
CanUserDeleteRows="False"
CanUserInsertRows="False"
AutoGenerateColumns="False"
VerticalGridLinesBrush="#FFE6E6E6"
HorizontalGridLinesBrush="#FFE6E6E6"
SelectedItem="{Binding SelectedData}"
ShowColumnHeaders="False"
AllowDrop="True"
EnableLostFocusSelectedState="False"
GroupRenderMode="Flat"
telerik:DragDropManager.AllowDrag="{Binding CanDragDrop, Mode=OneWay}"
telerik:ScrollingSettingsBehavior.IsEnabled="{Binding CanDragDrop, Mode=OneWay}"
telerik:ScrollingSettingsBehavior.ScrollAreaPadding="30"
telerik:ScrollingSettingsBehavior.ScrollStep="24"
telerik:ScrollingSettingsBehavior.ScrollStepTime="00:00:00.01"
EnableRowVirtualization="True"
RowStyleSelector="{StaticResource CustomStyleSelector}">
<i:Interaction.Triggers>
<dragDrop:DragDropQueryRoutedEventTrigger
EventName="DragDropCompleted" EventOwnerType="{x:Type telerik:DragDropManager}">
<i:InvokeCommandAction Command="{Binding DragDropCompletedCommand}" CommandParameter="{Binding ElementName=grdName }"/>
</dragDrop:DragDropQueryRoutedEventTrigger>
</i:Interaction.Triggers>
<telerik:RadGridView.Resources>
</telerik:RadGridView.Resources>
<telerik:RadGridView.RowStyle>
<Style TargetType="telerik:GridViewRow">
<Setter Property="telerik:DragDropManager.AllowDrag" Value="True" />
<Setter Property="telerik:DragDropManager.TouchDragTrigger" Value="TapAndHold"/>
<Style.Triggers>
<DataTrigger Binding="{Binding AStatus}" Value="Deleted">
<Setter Property="Background" Value="Red"/>
</DataTrigger>
<DataTrigger Binding="{Binding AStatus}" Value="Modified">
<Setter Property="Background" Value="Orange"/>
</DataTrigger>
<DataTrigger Binding="{Binding AStatus}" Value="New">
<Setter Property="Background" Value="Yellow"/>
</DataTrigger>
</Style.Triggers>
</Style>
</telerik:RadGridView.RowStyle>
<telerik:RadGridView.HeaderRowStyle>
<Style TargetType="telerik:GridViewHeaderRow">
<Setter Property="MinHeight" Value="0"/>
<Setter Property="Height" Value="6"/>
</Style>
</telerik:RadGridView.HeaderRowStyle>
<telerik:RadGridView.Columns>
...
Kind regards
Would it be possible for you to open a new support ticket and send over a sample project demonstrating both issues as I'm having trouble reproducing them at my end?
Thank you in advance for your cooperation.
Regards,
Dilyan Traykov
Progress Telerik

Hi Dilyan,
It seems everything is working as intended. We've bound to the object in the VM and are using RowStyles to color code the background based on the value of the property.
Thanks again for your help.
Kind regards.
I'm glad to hear that you've managed to achieve the desired result. If I can be of any further assistance, please let me know.
Regards,
Dilyan Traykov
Progress Telerik