Category / Section
How to add the textbox under each group and binding underlying property in WPF DataGrid (SfDataGrid)?
6 mins read
You can add a text box control to each group summary row of WPF DataGrid (SfDataGrid) by overriding the style of GroupSummaryRowControl.
In the sample, a text box with some text has been added to each group summary row of SfDataGrid. Refer to the following code snippet to load the text box control to each group summary row.
XAML
<Window.Resources>
<local:GroupSummaryConverter x:Key="converter"/>
<Style TargetType="{x:Type syncfusion:GroupSummaryRowControl}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type syncfusion:GroupSummaryRowControl}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="BorderStates">
<VisualState x:Name="NormalRow"/>
<VisualState x:Name="FrozenRow">
<Storyboard BeginTime="0">
<ThicknessAnimationUsingKeyFrames BeginTime="0" Duration="1.0:0:0" Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="PART_GroupSummaryRowBorder">
<EasingThicknessKeyFrame KeyTime="0" Value="0,0,0,1"/>
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="FooterRow">
<Storyboard BeginTime="0">
<ThicknessAnimationUsingKeyFrames BeginTime="0" Duration="1.0:0:0" Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="PART_GroupSummaryRowBorder">
<EasingThicknessKeyFrame KeyTime="0" Value="0,1,0,0"/>
</ThicknessAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames BeginTime="0" Duration="1.0:0:0" Storyboard.TargetProperty="Margin" Storyboard.TargetName="PART_GroupSummaryRowBorder">
<EasingThicknessKeyFrame KeyTime="0" Value="0,-1,0,0"/>
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="PART_GroupSummaryRowBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
<Rectangle x:Name="PART_CurrentFocusRow" Margin="{TemplateBinding CurrentFocusBorderMargin}" Stroke="DarkGray" StrokeThickness="1" StrokeDashArray="2 2" Visibility="{TemplateBinding CurrentFocusRowVisibility}"/>
<Border Background="{TemplateBinding GroupRowSelectionBrush}" Clip="{TemplateBinding SelectionBorderClipRect}" SnapsToDevicePixels="True" Visibility="{TemplateBinding SelectionBorderVisiblity}">
</Border>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" SnapsToDevicePixels="True" Grid.Row="0"/>
</Border>
<Border>
<syncfusion:SfTextBoxExt Watermark="Add Remark+" Text="{Binding Path=., Converter={StaticResource converter}}" Padding="15,0,0,0" BorderThickness="1"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
Converter.cs
This converter is used to display the text for the textbox which is present in the GroupSummaryRow.
public class GroupSummaryConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var groupRecords = ((value as SummaryRecordEntry).Parent as Group).Records;
var underlyingData = groupRecords[0].Data as Employee;
return "The employee name of corresponding employee id (" + underlyingData.EmployeeID + ") " + "is " + underlyingData.EmployeeName;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return value;
}
}
WPF Screenshot
UWP Screenshot
