How to apply different styles for StackedHeader in the SfDataGrid?

2 mins read

In SfDataGrid, when you apply style for the StackedHeader, it is applied for all the StackedHeaderColumn, by default. To set the different Style for each StackedHeaderColumn, you need to derive a new class from the GridStackedHeaderCellRenderer and override the OnInitializeEditElement(). You can refer to the following code example to derive a new class from the GridStackedHeaderCellRenderer.

public class GridCustomStackedRenderer : GridStackedHeaderCellRenderer
{
….
}

The following code examples illustrate how to define the multiple styles for the GridStackedHeaderCellControl.

XAML

<Application.Resources>
        <!--  Styles For StackedHeaderCellControl  -->
        <Style x:Key="style1" TargetType="syncfusion:GridStackedHeaderCellControl">
            <Setter Property="Background" Value="RosyBrown" />
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="FontStyle" Value="Italic" />
        </Style>
        <Style x:Key="style2" TargetType="syncfusion:GridStackedHeaderCellControl">
            <Setter Property="Background" Value="BlanchedAlmond" />
            <Setter Property="FontFamily" Value="Courier New" />
            <Setter Property="FontStyle" Value="Oblique" />
        </Style>
        <Style x:Key="style3" TargetType="syncfusion:GridStackedHeaderCellControl">
            <Setter Property="Background" Value="BlueViolet" />
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="FontStyle" Value="Italic" />
        </Style>
    </Application.Resources>

You can apply the above style for GridStackedHeaderCellControl based on the ColumnIndex in the OnInitializeEditElement method. You can refer to the following code example to override OnInitializeEditElement().

public class GridCustomStackedRenderer : GridStackedHeaderCellRenderer
{
    public GridCustomStackedRenderer()
    {
           
    }
    public override void OnInitializeEditElement(DataColumnBase dataColumn, GridStackedHeaderCellControl uiElement, object dataContext)
    {
        if (dataColumn.ColumnIndex == 0)//Check the ColumnIndex is 0
            uiElement.Style = App.Current.Resources["style1"] as Style;
        else if (dataColumn.ColumnIndex == 2)//Check the ColumnIndex is 0 
            uiElement.Style = App.Current.Resources["style2"] as Style;
        else if (dataColumn.ColumnIndex == 4)//Check the ColumnIndex is 4
            uiElement.Style = App.Current.Resources["style3"] as Style;
        base.OnInitializeEditElement(dataColumn, uiElement, dataContext);
    }    
}

You can refer to the following code example to remove the default GridStackedHeaderCellRenderer and add the derived GridStackedHeaderCellRenderer to the renderer’s collection in the SfDataGrid.

 //Default GridStackedCellRenderer is removed.
   this.datagrid.CellRenderers.Remove("StackedHeader");
  //Customized GridStackedCellRenderer is added.
   this.datagrid.CellRenderers.Add("StackedHeader", new GridCustomStackedRenderer());
}

The following screenshot shows the applied different style for the StackedHeaderColumn.

$D:\KB\Image.png$