How to automatically change the background color of Header Cells that Allow Editing for all sfDatagrid?

[Silvio]

Hi,

how is it possible to automatically set a particular background color for all the header cells of all sfDatagrid colums when the related column allows editing?

I need I global style for all sfDatagrid of my App so I can better indicate to the user (setting a different background color) wich are the columns tha have editable cells.

I also would like to be able to set this color in c# (not fixed in XAML) since it may change according to different styles chosen by the user.

Thank you.

[Sreemon Premkumar Muthukrishnan]

Hi Silvio,

Your requirement for changing the background color of header cell can be achieved by the using the HeaderStyle along with the Converter. You can follow the below references depends on your column generations. Please find the below code snippets.

Scenario 1: If you manually add the columns to the DataGrid, bind the HeaderStyle property with the converter and enable the AllowEditing property for the columns. Please have a look at the below code.

Converter code:

public class ColorConverter : IValueConverter

    {

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

        {

            var column = (value as GridColumn);

 

            if (column.AllowEditing)

            {

                return new SolidColorBrush(Colors.LightBlue);

            }

            else

            {

                return new SolidColorBrush(Colors.LightPink);

            }

        }

 

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

        {

            throw new NotImplementedException();

        }

    }

XAML code:

<syncfusion:SfDataGrid x:Name="dataGrid"  ItemsSource="{Binding Orders}" HeaderStyle="{StaticResource HeaderCellStyle}" AutoGenerateColumns="False" AutoGeneratingColumn="dataGrid_AutoGeneratingColumn" >

                <syncfusion:SfDataGrid.Columns>

                    <syncfusion:GridTextColumn MappingName="OrderID" HeaderText="Order ID"/>

                    <syncfusion:GridTextColumn MappingName="CustomerID" HeaderText="Customer ID" AllowEditing="True"/>

                    <syncfusion:GridTextColumn MappingName="CustomerName" HeaderText="Customer Name"/>

                    <syncfusion:GridTextColumn MappingName="Country" HeaderText="Country" AllowEditing="True" />

                    <syncfusion:GridTextColumn MappingName="ShipCity" HeaderText="Ship City"/>

                </syncfusion:SfDataGrid.Columns>

            </syncfusion:SfDataGrid>

Scenario 2:  If you are generating the column using the AutoGenerateColumns, bind the Converter to the HeaderStyle and enable the AllowEditing property for the column in the AutoGeneratingColumn event

Converter code:

public class ColorConverter : IValueConverter

    {

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

        {

            var column = (value as GridColumn);

 

            if (column.AllowEditing)

            {

                return new SolidColorBrush(Colors.LightBlue);

            }

            else

            {

                return new SolidColorBrush(Colors.LightPink);

            }

        }

 

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

        {

            throw new NotImplementedException();

        }

    }

CS code:

private void dataGrid_AutoGeneratingColumn(object sender, Syncfusion.UI.Xaml.Grid.AutoGeneratingColumnArgs e)

        {

            // Enabling AllowEditing for specific columns.

            if (e.Column.MappingName == "ShipCity" || e.Column.MappingName == "CustomerName")

            {

                e.Column.AllowEditing = true;

            }

        }

We have prepared a sample based on your requirement, Please find the sample in the attachment and let us know if you have any concerns.

For more information related to Conditional Styling, please refer the below user guide documentation link,

UG link: https://help.syncfusion.com/wpf/datagrid/conditional-styling

Regards,
Sreemon Premkumar M.

Attachment: SfDataGrid_HeaderCellsStylingDemo_b1190fa0.zip