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

Can I add button to StackedColumn Header in DataGrid?


I want to add button to StackedColumn is it possible ? My goal is to hide all columns in the StackedColumn when the button is pressed.

1 Reply

DM Dhanasekar Mohanraj Syncfusion Team January 11, 2023 02:38 PM UTC


Your requirement to add the button to the StackedHeader in SfDataGrid can be achieved by customizing the stacked headers template and using the custom renderer shown below,



      <Style x:Key="stackedHeaderCell" TargetType="syncfusion:GridStackedHeaderCellControl">

        <Setter Property="Background" Value="Transparent" />

        <Setter Property="BorderBrush" Value="Gray" />

        <Setter Property="BorderThickness" Value="0,0,1,1" />

        <Setter Property="HorizontalContentAlignment" Value="Center" />

        <Setter Property="VerticalContentAlignment" Value="Center" />

        <Setter Property="Padding" Value="10,3,2,3" />

        <Setter Property="FontFamily" Value="Segoe UI" />

        <Setter Property="Foreground" Value="Gray" />

        <Setter Property="FontSize" Value="14" />

        <Setter Property="FontWeight" Value="Normal" />

        <Setter Property="IsTabStop" Value="False" />

        <Setter Property="Template">


                <ControlTemplate TargetType="syncfusion:GridStackedHeaderCellControl">

                    <Border Background="{TemplateBinding Background}"

                        BorderBrush="{TemplateBinding BorderBrush}"

                        BorderThickness="{TemplateBinding BorderThickness}">

                        <StackPanel HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

                                    Margin="{TemplateBinding Padding}" Orientation="Horizontal">

                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

                            <Button Margin="{TemplateBinding Padding}"  Background="Cyan" Click="OnClick"

                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

                                      Height="10" Width="18">










public class GridStackedHeaderCellRendererExt : GridStackedHeaderCellRenderer


    // override the OnInitializeEditElement

    public override void OnInitializeEditElement(DataColumnBase dataColumn, GridStackedHeaderCellControl uiElement, object dataContext)


        var colum = (dataContext as StackedColumn);

        // Apply the custom style for all the StackedHeaders

        // Apply the custom style for Order Details StackedHeader

        if (colum.HeaderText == "Order Details")


            var style = App.Current.MainWindow.Resources["stackedHeaderCell"] as Style;

            uiElement.Style = style;


        base.OnInitializeEditElement(dataColumn, uiElement, dataContext);



Adding the custom renderer:

// Remove the renderer stacked header


// Add the stacked header with new style

dataGrid.CellRenderers.Add("StackedHeader", new GridStackedHeaderCellRendererExt());

Hiding the child columns:

void OnClick(object sender, RoutedEventArgs e)


    // Here you can hide the child columns as you required

    var removingColumns = this.dataGrid.StackedHeaderRows[1].StackedColumns[0].ChildColumns.Split(',').ToList<string>();

    foreach (var stackedColumnName in removingColumns.ToList())


        this.dataGrid.Columns[stackedColumnName].IsHidden = true;



We have prepared the sample for your reference, please have a look at this.

For more information related to stacked headers customization and handling the child columns, please refer to the below knowledge base documentation and user guide documentation links,

KB Link:  https://www.syncfusion.com/kb/2509/how-to-insert-combobox-in-stackedheader,

UG Link:

Dhanasekar M.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Attachment: SfDataGrid_Demo_89bc6301.zip

Live Chat Icon For mobile
Up arrow icon