Change row background color based on grouping

[Abhinav]

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

   

[Abhinav]

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

[Abhinav]

Hi Telerik,

Please find the attached image for a more descriptive example of the desired behavior.

 

Kind regards

[Dilyan Traykov]

Hello Abhinav,

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

[Mahima]

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!

[Abhinav]

Hi Dilyan,

Thank you very much - we will give it a try.

 

Kind regards

[Abhinav]

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

[Dilyan Traykov]

Hello Abhinav,

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

[Abhinav]

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.

[Dilyan Traykov]

Hello Abhinav,

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