Can I add button to StackedColumn Header in DataGrid?

[Özgür]

Hello,

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.

[Dhanasekar Mohanraj]

Özgür,

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,

XAML:

<Window.Resources>

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

            <Setter.Value>

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

                            </Button>

                        </StackPanel>

                    </Border>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

</Window.Resources>

GridStackedHeaderCellRendererExt.CS

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

dataGrid.CellRenderers.Remove("StackedHeader");

// Add the stacked header with new style

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

Hiding the child columns:

private 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:
https://help.syncfusion.com/wpf/datagrid/stacked-headers#removing-childcolumns

Regards,
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