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

Put HeaderTemplate into SfDataGrid StackedColumn.

Hello! SfDataGrid is very nice.

I want to put CheckBox in StackedColumn for "Select All".

But it doesn't seem to support HeaderTemplate.

What should I do?

Thanks in advance.


2 Replies

VS Vijayarasan Sivanandham Syncfusion Team January 12, 2023 06:37 PM UTC

Hi Neominky

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

XAML code snippet related to customization of GridStackedHeaderCellControl:

<Window.Resources>

    <local:ClickCommandParameterConverter x:Key="clickCommandParameterConverter" />

   

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

                            <CheckBox Command="{Binding DataContext.ClickCommand,ElementName=sfDataGrid}"

                                       IsChecked="{x:Null}" HorizontalAlignment="Center" VerticalAlignment="Bottom" >

                                <CheckBox.CommandParameter >

                                    <MultiBinding Converter="{StaticResource clickCommandParameterConverter}" >

                                        <Binding ElementName="sfDataGrid"  />

                                        <Binding  RelativeSource="{RelativeSource Self}"  />

                                    </MultiBinding>

                                </CheckBox.CommandParameter>

                            </CheckBox>

                        </StackPanel>

                    </Border>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

</Window.Resources>


C# code snippet related to customization of GridStackedHeaderCellRenderer:

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);

    }

}


C# code snippet related to adding the custom renderer:

// Remove the renderer stacked header

sfDataGrid.CellRenderers.Remove("StackedHeader");

// Add the stacked header with new style

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


C# code snippet related to customization of select all:

//Event customization

public void ExecuteClickCommand(object parameter)

{

    if (parameter != null)

    {

        var param = (Tuple<object, object>)parameter;

 

        //get the SfDataGrid

        var dataGrid = (param.Item1 as SfDataGrid);

        //Get the CheckBox

        var checkBox = param.Item2 as CheckBox;

        //here set the Stacked HeaderText based on IsLengthDurationToggle property

        if (checkBox.IsChecked != null && (bool)checkBox.IsChecked)

            //Select the all items in SfDataGrid

            dataGrid.SelectAll();

        else

            //Clear the selection

            dataGrid.ClearSelections(false);

    }

}


C# code snippet related to customization ClickCommandParameterConverter:

public class ClickCommandParameterConverter : IMultiValueConverter

{

    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)

    {

        Tuple<object, object> tuple = new Tuple<object, object>(values[0], values[1]);

        return tuple;

    }

 

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)

    {

        throw new NotImplementedException();

    }

}


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

https://help.syncfusion.com/wpf/datagrid/styles-and-templates#styling-stacked-headers

Find the sample in the attachment.

Regards,

Vijayarasan S


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


Attachment: SfDataGridDemo_2fc05ed1.zip


ML Morgan Le Fay January 23, 2023 11:52 AM UTC

It works very well. thank you.


Loader.
Up arrow icon