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

Style GridViewRow based on data triggers

2 Answers 718 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Andy
Top achievements
Rank 1
Andy asked on 24 Sep 2019, 06:57 AM

Hey,

I am trying to create a Telerik Data Grid (RadGridView) which styles each line dynamically based on some data triggers. I am using VS2019, .NET 4.6 WPF with Telerik 2019.2 NOXAML.

As I did not know how I searched the web (including this forum) and identified a basic solution. Using

<telerik:RadGridView.RowStyle>
    <Style TargetType="telerik:GridViewRow">
        <Setter Property="Background" Value="Red"/>
        <Setter Property="Foreground" Value="White"/>
    </Style>
</telerik:RadGridView.RowStyle>

I should be able to style every row red/white (for starters ...). This is from the example here (https://docs.telerik.com/devtools/wpf/controls/radgridview/styles-and-templates/styling-a-row) which is not really good because it does not tell me HOW to define it exactly on my grid. However I also found an example from the forum from 2010 (https://www.telerik.com/forums/setting-radgridview-row-background-color-based-on-the-value-of-a-column-in-the-row) which uses the styling as you see above. The example works however my grid simply shows "nothing" as soon as I use the style definition.

 

This is my grid which I simplified for you:

App.xml:

<ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/Telerik.Windows.Themes.Windows8Touch;component/Themes/System.Windows.xaml"/>
        <ResourceDictionary Source="/Telerik.Windows.Themes.Windows8Touch;component/Themes/Telerik.Windows.Controls.xaml"/>
        <ResourceDictionary Source="/Telerik.Windows.Themes.Windows8Touch;component/Themes/Telerik.Windows.Controls.Input.xaml"/>
        <ResourceDictionary Source="/Telerik.Windows.Themes.Windows8Touch;component/Themes/Telerik.Windows.Controls.GridView.xaml"/>
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

 

Grid.xml:

<telerik:RadGridView ItemsSource="{Binding MyObservableList}" AutoGenerateColumns="False" RowIndicatorVisibility="Collapsed">
    <telerik:RadGridView.RowStyle>
        <Style TargetType="telerik:GridViewRow">
            <Setter Property="Background" Value="Red"/>
            <Setter Property="Foreground" Value="White"/>
        </Style>
    </telerik:RadGridView.RowStyle>
        
    <telerik:RadGridView.Columns>
        <telerik:GridViewDataColumn DataMemberBinding="{Binding idx}" Header="ID" />
        <telerik:GridViewDataColumn DataMemberBinding="{Binding Description}" Header="Description" />
    </telerik:RadGridView.Columns>
</telerik:RadGridView>

2 Answers, 1 is accepted

Sort by
0
Accepted
Dimitar Dinev
Telerik team
answered on 24 Sep 2019, 11:04 AM

Hi Andy,

Thank you for the code snippets.

When using NoXaml binaries, you must use the BasedOn property of the Style. For example:

<telerik:RadGridView.RowStyle>
   <Style TargetType="telerik:GridViewRow" BasedOn="{StaticResource GridViewRowStyle}">
            ...
   </Style>
</telerik:RadGridView.RowStyle>
For more information, please take a look at the note under NoXaml assemblies in the Xaml vs. NoXaml article as well as the Styling the Controls article.

Attached, you can find a sample project which demonstrates this approach. It uses NoXaml 2019.2 binaries. Please, review it and let me know if it delivered the desired result.

Regards,
Dimitar Dinev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Andy
Top achievements
Rank 1
answered on 24 Sep 2019, 11:55 AM

Hey Dimitar. Thanks for your quick reply. It works like a charm!

 

I would like to post a full answer just in case someone is looking this up from Google. A data trigger style can be added in the following way:

<telerik:RadGridView>
    <telerik:RadGridView.RowStyle>
        <Style TargetType="telerik:GridViewRow" BasedOn="{StaticResource GridViewRowStyle}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Warning}" Value="false">
                    <Setter Property="Background" Value="WhiteSmoke"></Setter>
                    <Setter Property="Foreground" Value="Black"></Setter>
                </DataTrigger>
                <DataTrigger Binding="{Binding Error}" Value="false">
                    <Setter Property="Background" Value="Black"></Setter>
                    <Setter Property="Foreground" Value="WhiteSmoke"></Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </telerik:RadGridView.RowStyle>   
</telerik:RadGridView>

Tags
GridView
Asked by
Andy
Top achievements
Rank 1
Answers by
Dimitar Dinev
Telerik team
Andy
Top achievements
Rank 1
Share this question
or