Articles in this section
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

Added TextBox under the group in WPF DataGrid

UWP Screenshot

Added TextBox under the group in UWP DataGrid

View sample in GitHub.

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied