Binding property to TreeListView Row Background color

[Jessica]

 

I am trying to bind the background of the row to a variable in the datasource. I cannot seem to get it to work.
I am including the Xaml and Xaml.cs code to see if you can see what I am missing.

Reason for trying to bind to a variable is because I have a validate button in my program. It will return the ID of the invalid row
that will be highlighted in the treelistview... (the RowBGColor would be set to yellow ).

using System.Collections.ObjectModel;
using System.Windows;
using System.Drawing;

namespace TelerikRowBackground
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private int rowIndex = 1;
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Highlight Row: " + rowIndex);

            //TODO: Change row background for rowIndex to Yellow.
            // And reset previous hightlighted row.


            if(rowIndex == 3)
            {
                rowIndex = 1;
            }
            else
            {
                rowIndex++;
            }
        }
    }

    public class ViewModel
    {
        public ObservableCollection<Model> AllData
        {
            get
            {
                return new ObservableCollection<Model>()
                           {
                               new Model()
                                   {
                                       ID = 1,
                                       RowBGColor = Color.Red,
                                       Property1 = "Test1.1",
                                       Property2 = "Test2.1",
                                       Property3 = "Test3.1",
                                       Children = new ObservableCollection<Model>()
                                                      {
                                                          new Model()
                                                              {
                                                                  ID = 2,
                                                                  RowBGColor = Color.Yellow,
                                                                  Property1 = "Test1.2",
                                                                  Property2 = "Test2.2",
                                                                  Property3 = "Test3.2",
                                                                  Children = new ObservableCollection<Model>()
                                                                                 {
                                                                                     new Model()
                                                                                         {
                                                                                             ID = 3,
                                                                                             RowBGColor = Color.Green,
                                                                                             Property1 = "Test1.3",
                                                                                             Property2 = "Test2.3",
                                                                                             Property3 = "Test3.3"
                                                                                         }
                                                                                 }
                                                              }
                                                      }
                                   }
                           };
            }
        }
    }

    public class Model
    {
        public int ID { get; set; }
        public string Property1 { get; set; }
        public string Property2 { get; set; }
        public string Property3 { get; set; }
        public Color RowBGColor { get; set; }
        private ObservableCollection<Model> _children;
        public ObservableCollection<Model> Children
        {
            get { return _children ?? (_children = new ObservableCollection<Model>()); }
            set { _children = value; }
        }
    }
}

<Window x:Class="TelerikRowBackground.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

        xmlns:local="clr-namespace:TelerikRowBackground" Title="MainWindow" Height="350" Width="525">

    <Window.Resources>

        <local:ViewModel x:Key="MyViewModel"/>

    </Window.Resources>

 

    <DockPanel  DataContext="{StaticResource MyViewModel}">

        <telerik:RadTreeListView Name="radTreeListView1"

                                 DockPanel.Dock="Top"

                                 Margin="5,5,0,0"

                                 AutoGenerateColumns="False"                

                                 ItemsSource="{Binding AllData}"

                                 VerticalAlignment="Top"

                                 HorizontalAlignment="Left"

                                 IsFilteringAllowed="False"

                                 telerik:StyleManager.Theme="Windows7"

                                 EnableColumnVirtualization="True"

                                 EnableRowVirtualization="True"

                                 AutoExpandGroups="True" >

 

            <telerik:RadTreeListView.ItemContainerStyle>

                <Style TargetType="telerik:GridViewRowItem">

                    <Setter Property="Foreground" Value="{Binding RowBGColor}" />

                </Style>

            </telerik:RadTreeListView.ItemContainerStyle>

 

            <telerik:RadTreeListView.ChildTableDefinitions>

                <telerik:TreeListViewTableDefinition ItemsSource="{Binding Children}" />

            </telerik:RadTreeListView.ChildTableDefinitions>

 

            <telerik:RadTreeListView.Columns>

                <telerik:GridViewDataColumn x:Name="idColumn" DataMemberBinding="{Binding ID, Mode=TwoWay }" Header="ID" />

                <telerik:GridViewDataColumn x:Name="prop1Column" DataMemberBinding="{Binding Property1, Mode=TwoWay }" Header="Property 1" />

                <telerik:GridViewDataColumn x:Name="prop2Column" DataMemberBinding="{Binding Property2, Mode=TwoWay }" Header="Property 2" />

                <telerik:GridViewDataColumn x:Name="prop3Column" DataMemberBinding="{Binding Property3, Mode=TwoWay }" Header="Property 3" />

            </telerik:RadTreeListView.Columns>

        </telerik:RadTreeListView>

        <Button DockPanel.Dock="Bottom" Height="50" Click="Button_Click" >Click to Highlight Row</Button>

    </DockPanel>

</Window>

[Pavel Pavlov]

Hello Jessica,

The recommended approach when you need a conditional styling of a row based on a value in the underlying business object is to use a row style selector.
* The link points to a RadGridView related section . However since both RadGridView and RadTreeListView share a common API and code base, the approach should be valid for RadTreeListView as well .

Let me know in case you find troubles adapting this to your production code.

All the best,
Pavel Pavlov
the Telerik team