We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

alternative alternative colours for sfTreefgrid rows


  How can I create alternative colours for sfTreefgrid rows and child collections


1 Reply

MK Muthukumar Kalyanasundaram Syncfusion Team June 28, 2017 04:52 AM UTC

Hi Siju, 

Thank you for contacting Syncfusion support. 

We have checked your query. You can achieve your requirement by customizing the style of  “TreeGridRowControl” as shown like below code, 
Code Snippet: Xaml 
<local:StyleConverter x:Key="styleConverter" /> 
<Style TargetType="syncfusion:TreeGridRowControl"> 
    <Setter Property="utils:SetterValueBindingHelper.PropertyBinding"> 
            <utils:SetterValueBindingHelper Binding="{Binding Converter={StaticResource styleConverter}, RelativeSource={RelativeSource Self}}" Property="Background" />                   
Code Snippet: C# 
// based on Nodelevel and RowIndex, you can apply the background color 
internal class StyleConverter : IValueConverter 
    public object Convert(object value, Type targetType, object parameter, string language) 
        if((value as TreeGridRowControl).DataRow.Level == 0) 
            return new SolidColorBrush(Colors.SkyBlue); 
        if (((value as TreeGridRowControl).DataRow.RowIndex %2 ==0) && ((value as TreeGridRowControl).DataRow.Level !=0)) 
            return new SolidColorBrush(Color.FromArgb(255, 255, 211, 86)); 
        else if (((value as TreeGridRowControl).DataRow.RowIndex % 2 != 0) && ((value as TreeGridRowControl).DataRow.Level !=0)) 
            return new SolidColorBrush(Colors.Bisque); 
            return new SolidColorBrush(Color.FromArgb(255, 112, 252, 160));            
    public object ConvertBack(object value, Type targetType, object parameter, string language) 
        throw new NotImplementedException(); 

Please let us know if you have any query. 

Muthukumar K 

Live Chat Icon For mobile
Up arrow icon