Binding property to TreeListView Row Background color

2 posts, 0 answers
  1. Jessica
    Jessica avatar
    12 posts
    Member since:
    Jun 2011

    Posted 19 Sep 2011 Link to this post

     
    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: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>
  2. Pavel Pavlov
    Admin
    Pavel Pavlov avatar
    2039 posts

    Posted 20 Sep 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. UI for WPF is Visual Studio 2017 Ready
Back to Top