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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to change background of the RowHeader based on the business logic?

Platform: WPF |
Control: SfDataGrid

RowHeader is a special Column used to indicate the row status like CurrentRow, Editing status, Errors in row, etc.  You can enable or disable the RowHeader by setting the ShowRowHeader property in SfDataGrid.

RowHeader allows you to customize the background based on the business logic .By default the RowHeader has the following format as illustrated in the following screenshot.

customize the background in Grid

Figure 1: Default style of GridRowHeaderCell

You can change the background color of the RowHeader by customizing the style of the GridRowHeaderCell’s Background property based on the business logic. A converter is used to change the appropriate background color based on business logic values.

XAML

<Application.Resources>       
        <local:CustomConverter x:Key="converter"/>
        <!--Customizing the RowHeader style--> 
        <Style  TargetType= "syncfusion:GridRowHeaderCell">
            <!--By using converter the Background color is changed based on the business logic-->
            <Setter Property="Background" Value="{Binding Converter={StaticResource converter }}"/>
        </Style>
    </Application.Resources>

The Background color is changed to Red when the Status property value of the Data class is set to true else the RowHeader’s color is changed to Green Color.

C#

public class CustomConverter:IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            //Type casting the value as Data class(Business logic)
            var data = value as Data;
            //The Red color is applied to RowHeader when the status value is true otherwise the Green color is applied 
            if (data.Status == true)
                return Brushes.Red;
            else
                return Brushes.Green;
        }
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

 

Note:

 Using converters in Style is applicable only for WPF and Silverlight.

 

In Silverlight, the color is applied to the corresponding business logic as illustrated in the following code example.

C#

public class ConverterClass:IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            //Type casting the value as Data class(Business logic)
            var data = value as Data;
            //The Red color is applied to RowHeader when the status value is true otherwise the Green color is applied 
            if (data.Status == true)
                return new SolidColorBrush(Colors.Red);
            else
                return new SolidColorBrush(Colors.Green);
        }
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

The following screenshot displays the customized GridRowHeaderCell’s style.

customized GridRowHeaderCell’s style.

Figure 2: After customizing the GridRowHeaderCell Style

 

 

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile