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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add the textbox under each group and binding underlying property in WPF DataGrid (SfDataGrid)?

Platform: WPF |
Control: SfDataGrid

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.

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile