This is a migrated thread and some comments may be shown as answers.

Change row background color based on grouping

8 Answers 443 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Abhinav
Top achievements
Rank 1
Abhinav asked on 13 Jul 2017, 10:25 PM

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

Sort by
0
Abhinav
Top achievements
Rank 1
answered on 13 Jul 2017, 10:35 PM

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

0
Abhinav
Top achievements
Rank 1
answered on 14 Jul 2017, 07:40 PM

Hi Telerik,

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

 

Kind regards

0
Accepted
Dilyan Traykov
Telerik team
answered on 18 Jul 2017, 01:25 PM
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
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
0
Abhinav
Top achievements
Rank 1
answered on 18 Jul 2017, 04:25 PM

Hi Dilyan,

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

 

Kind regards

0
Abhinav
Top achievements
Rank 1
answered on 20 Jul 2017, 06:18 PM

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

0
Dilyan Traykov
Telerik team
answered on 21 Jul 2017, 11:48 AM
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
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which you to write beautiful native mobile apps using a single shared C# codebase.
0
Abhinav
Top achievements
Rank 1
answered on 24 Jul 2017, 10:02 PM

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.

0
Dilyan Traykov
Telerik team
answered on 27 Jul 2017, 11:34 AM
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
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Tags
GridView
Asked by
Abhinav
Top achievements
Rank 1
Answers by
Abhinav
Top achievements
Rank 1
Dilyan Traykov
Telerik team
Share this question
or