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 apply different styles for StackedHeader in the SfDataGrid?

Platform: WinRT |
Control: SfDataGrid |
Published Date: June 2, 2015 |
Last Revised Date: July 27, 2021 |
Product Version: 12.4.0.24

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.

C#

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().

C#

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.

C#

 //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

 

Sample Links

WinRT

WPF

WP WinRT

UWP

 

 

 

 

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