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.
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.
It works very well. thank you.