Need to change background color of a row based on a condition

[Tony]

I have a RadGridView control on a screen in my WPF program.  The GridView contains data from up to 3 different tables in my database.  I have implemented an Interface in the ViewModel objects so that the RadGridView can display them all.  (The RadGridViews ItemsSource property is set to an instance of an ObservableCollection of the interface). 

In addition, one of the types, called a Read, can have an array of another of the types, called Alarms.  The RadGridView has a RowDetailsTemplate that is only displayed when the number of rows in the Alarms array is greater than 0.  There is a column in the RadGridView which is of a custom type called CustomGridViewToggleRowDetailsColumn that I wrote.  This column displays the row detail toggle symbol only if the row is a Read and the Alarms array's length is bigger than 2.

All of this is working very well.  Now, however, I need to change the background color of any row that has Alarms associated with it.  Can I use the RowStyle and RowStyleSelector properties to do this?  Just exactly how do I make this happen?

Thanks

Tony

[Maya]

Hello Tony,

Indeed, you can work with RowStyleSelector. Please take a look at our online documentation and demos for a reference. The condition you implement in SelectStyle method might be verifying the count of the Alarms collection for example. Still, the most appropriate approach depends entirely on your custom scenario. 

Greetings,
Maya
the Telerik team

[Tony]

Reviewing the RowStyleSelector example, I created my own ConditionalSyteSelector class based on your code.

Here's the Xaml for the resources I defined:

<UserControl.Resources>
    <BooleanToVisibilityConverter x:Key="BoolToVisibility" />
    <cs:DateConverter x:Key="DateConverter" />
    <cs:EnumDisplayer Type="{x:Type vm:RecordTypes}" x:Key="RecordTypeConverter" />
    <cs:ReportInfoConverter x:Key="RowConverter" />
    <DataTemplate x:Key="ReadRowDetailsTemplate">
            <DataGrid AlternatingRowBackground="{DynamicResource AlternatingRowBackground}"
                      AutoGenerateColumns="False"
                      CanUserResizeColumns="True"
                      CanUserSortColumns="False"
                      FontSize="16"
                      FontWeight="Bold"
                      HorizontalAlignment="Center"
                      IsReadOnly="True"
                      ItemsSource="{Binding Path=Alarms, Mode=TwoWay}"
                      Margin="5"
                      Name="AlarmsGrid"
                      ScrollViewer.CanContentScroll="True"
                      ScrollViewer.HorizontalScrollBarVisibility="Auto"
                      ScrollViewer.VerticalScrollBarVisibility="Auto"
                      SelectionChanged="AlarmsGrid_SelectionChanged"
                      SelectionMode="Single"
                      SelectionUnit="FullRow"
                      VerticalAlignment="Top">
                <DataGrid.Columns>
                    <DataGridTextColumn Binding="{Binding Path=AlarmClass}"
                                        Header="Alarm Class"
                                        Width="250" />
                    <DataGridTextColumn Binding="{Binding Path=AlarmTime, Converter={StaticResource DateConverter}}"
                                        Header="Time"
                                        Width="180" />
                    <DataGridTextColumn Binding="{Binding Path=ListName}"
                                        Header="Source"
                                        Width="200" />
                    <DataGridTextColumn Binding="{Binding Path=AlarmStatus}"
                                        Header="Alarm Status"
                                        Width="150"/>
                    <DataGridTextColumn Binding="{Binding Path=AlarmRejectedReason}"
                                        Header="Reason"
                                        Width="180" />
                </DataGrid.Columns>
            </DataGrid>
    </DataTemplate>
    <Style x:Key="HasAlarmsStyle" TargetType="telerik:GridViewRow">
        <Setter Property="Background" Value="Red" />
    </Style>
    <Style x:Key="NoAlarmsStyle" TargetType="telerik:GridViewRow" />

    <cs:ConditionalStyleSelector x:Key="StyleSelector" ConditionConverter="{StaticResource RowConverter}">
        <cs:ConditionalStyleSelector.Rules>
            <cs:ConditionalStyleRule Style="{StaticResource HasAlarmsStyle}">
                <cs:ConditionalStyleRule.Value>
                    <sys:Boolean>True</sys:Boolean>
                </cs:ConditionalStyleRule.Value>
            </cs:ConditionalStyleRule>
            <cs:ConditionalStyleRule Style="{StaticResource NoAlarmsStyle}">
                <cs:ConditionalStyleRule.Value>
                    <sys:Boolean>False</sys:Boolean>
                </cs:ConditionalStyleRule.Value>
            </cs:ConditionalStyleRule>
        </cs:ConditionalStyleSelector.Rules>
    </cs:ConditionalStyleSelector>
</UserControl.Resources>

Here's my ReportInfoConverter class:

public class ReportInfoConverter : IValueConverter {
        public object Convert( object value, Type targetType, object parameter, System.Globalization.CultureInfo culture ) {
            IReportInfoObject row = value as IReportInfoObject;
            if ( row != null ) {
                return row.HasAlarms;
            }

            return null;
        }

        public object ConvertBack( object value, Type targetType, object parameter, System.Globalization.CultureInfo culture ) {
            throw new NotImplementedException();
        }
    }

For completeness, here's the Xaml for my RadGridView control:

<telerik:RadGridView AlternationCount="1"
                     AutoExpandGroups="True"
                     AutoGenerateColumns="False"
                     CanUserDeleteRows="False"
                     CanUserFreezeColumns="False"
                     CanUserInsertRows="False"
                     CanUserResizeColumns="True"
                     CanUserSortColumns="True"
                     EnableColumnVirtualization="True"
                     EnableRowVirtualization="True"
                     FontSize="20"
                     FontWeight="Bold"
                     Grid.ColumnSpan="2"
                     IsReadOnly="True"
                     Margin="5"
                     Name="ReportResults"
                     RowDetailsTemplate="{StaticResource ReadRowDetailsTemplate}"
                     RowStyleSelector="{StaticResource StyleSelector}"
                     SelectionChanged="ReportResults_SelectionChanged"
                     SelectionUnit="FullRow"
                     ScrollMode="Deferred"
                     ScrollViewer.CanContentScroll="True"
                     ScrollViewer.HorizontalScrollBarVisibility="Auto"
                     ScrollViewer.VerticalScrollBarVisibility="Auto"
                     ShowGroupFooters="True"
                     TabIndex="8"
                     ToolTip="Report Results">
    <telerik:RadGridView.Columns>
        <cs:CustomGridViewToggleRowDetailsColumn Click="DetailsToggle_Click"
                                                 IsEnabled="False"
                                                 IsFilterable="False"
                                                 IsGroupable="False"
                                                 ToggleButtonVisibility="{Binding Path=HasAlarms, Converter={StaticResource BoolToVisibility}}"/>
        <telerik:GridViewDataColumn DataMemberBinding="{Binding RecordType, Mode=OneWay, Converter={StaticResource RecordTypeConverter}}"
                                    Header="Record Type"
                                    Width="200" />
        <telerik:GridViewDataColumn DataMemberBinding="{Binding Plate,      Mode=OneWay}"
                                    Header="Plate"
                                    Width="260" />
        <telerik:GridViewDataColumn DataMemberBinding="{Binding State,      Mode=OneWay}"
                                    Header="State"
                                    Width="150" />
        <telerik:GridViewDataColumn DataMemberBinding="{Binding TimeStamp,  Mode=OneWay, Converter={StaticResource DateConverter}}"
                                    Header="Date"
                                    Width="250" />
    </telerik:RadGridView.Columns>
</telerik:RadGridView>

I pretty much used the ConditionalStyleSelector class from the example unchanged, except for the namespace.  I have placed breakpoints in the ConditionalStyleSelector and in the ReportInfoConverter classes and the code is not being called at all.  My breakpoints are never hit.

Doing a search, I came across this blog post.  Near the end of it, the post mentions that you can't use the RowStyleSelector and the RowDataTemplate properties together.  I'm not using the RowDataTemplate property, but the RowDetailsTemplate property.  I need to change the background color of a row that has Row Details.  This isn't working for me as it is.  What am I doing wrong?

Tony 

[Maya]

Hi Tony,

I am sending you a sample project illustrating how you can define RowStyleSelector for a grid whose rows may or may not have row details.  Please take a look at it and let me know whether you can get the same behavior on it as the one you experience.

Kind regards,
Maya
the Telerik team

[Tony]

I was finally able to get my code to work.  I ended up deleting the ConditionalStyleSelector class and implementing the StyleSelector class in the example you sent, with changes for my own project's classes.  This did not work at first; I had to delete the AlternationRowCount property from my RadGridView's attributes in the XAML before the changes took effect.

Thank you for your help.

Tony

[Alexander]

Hello,

i'am also using the StyleSelector to change the background of an GridViewRow in runtime. But i also want to implement an AlternateRowBackground, but - as Tony said - when i set the AlternateRowBackground and AlternationCount-Property in my Grid the StyleSelector doesnt work.
I don't want to create two different Styles for normal Rows and AlternateRows.
Is it possible to set both, RowStyleSelector and AlternateRowBackground or is their a way to implement the AlternateRowBackground in my StyleSelctor? Can i differ if the call comes from the AlternateStyleSelctor or from the RowStyleSelector?


Thank you for your help
Alex

[Vlad]

Hello,

 I've replied to your other thread. 

Kind regards,
Vlad
the Telerik team

[Azhar]

When I add AlternationCount="1"  I am unable to expand RowDetailsTemplate. Please give the best solution where I can keep AlternationCount="1" as well as expand RowDetailsTemplate.

[Dinko]

Hello Azhar,

I've replied to your other thread with the results of my investigation. If you have any further questions, please reply in that other thread so we can keep the conversation in a single location.