Category / Section
How to load a button in caption summary row and prevent expand and collapse of groups in WPF DataGrid (SfDataGrid)?
1 min read
You can load a button inside the CaptionSummaryCell by customizing the ControlTemplate of the GridCaptionSummaryCell using Style in WPF DataGrid (SfDataGrid).
<Style TargetType="syncfusion:GridCaptionSummaryCell">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="syncfusion:GridCaptionSummaryCell">
<Border x:Name="PART_GridCaptionSummaryCellBorder"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<Button Content="Click" Width="50" Height="20" Command="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type syncfusion:SfDataGrid}}, Path=DataContext.ClickCommand}" CommandParameter="{Binding}"/>
</StackPanel>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You can prevent the expanding and collapsing of the group upon clicking the button, by handling the SfDatagrid.GroupCollapsing and SfDatagrid.GroupExpanding events as shown in the below the code.
public MainWindow()
{
InitializeComponent();
this.datagrid.GroupCollapsing += Datagrid_GroupCollapsing;
this.datagrid.GroupExpanding += Datagrid_GroupExpanding;
}
private void Datagrid_GroupExpanding(object sender, Syncfusion.UI.Xaml.Grid.GroupChangingEventArgs e)
{
//Code to skip expanding the group when clicking the button in caption row.
if (Mouse.DirectlyOver is Button)
{
e.Cancel = true;
}
}
private void Datagrid_GroupCollapsing(object sender, Syncfusion.UI.Xaml.Grid.GroupChangingEventArgs e)
{
//Code to skip collapsing the group when clicking the button in caption row.
if (Mouse.DirectlyOver is Button)
{
e.Cancel = true;
}
}
The output upon executing the above task will be as shown below.
