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

How to customize datagrid GroupDropArea?

Thread ID:

Created:

Updated:

Platform:

Replies:

131512 Jul 14,2017 02:03 AM Jul 18,2017 05:44 AM WPF 3
loading
Tags: SfDataGrid
BAO YADONG
Asked On July 14, 2017 02:03 AM

Hi,

I need to customize the styling of GroupDropArea feature in SfDatagrid. But the property of the styling seems to be limited. Below is the standard styling for GroupDropArea:


May i know how can i remove the 3 togglebutton at top right, and remove the dotted line surrounding the watermark text? also the watermark text seems like not able to set the alignment to top left.

Srinivasan Vasu [Syncfusion]
Replied On July 14, 2017 06:21 AM

Hi Bao, 
 
Thanks for contacting Syncfusion support. 
 
We have checked your query and you can achieve your requirement by customizing the style GroupDropArea. 
 
Please refer the below code example 
 
   <Style x:Key="ToggleButtonStyle" TargetType="ToggleButton"> 
            <Setter Property="Background" Value="Transparent" /> 
             // Remove ToggleButton of GroupDropArea 
 
            <Setter Property="Visibility" Value="Collapsed"/> 
            <Setter Property="Template"> 
                <Setter.Value> 
                    <ControlTemplate TargetType="ToggleButton"> 
                        <Grid Background="{TemplateBinding Background}"> 
                            <Path Data="M31.460022,0 C34.221447,-4.8935362E-08 36.460022,2.2385764 36.460022,5 C36.460022,7.7614241 34.221447,10 31.460022,10 C28.698599,10 26.460022,7.7614241 26.460022,5 C26.460022,2.2385764 28.698599,-4.8935362E-08 31.460022,0 z M18.208984,0 C20.970407,-4.8935362E-08 23.208984,2.2385764 23.208984,5 C23.208984,7.7614241 20.970407,10 18.208984,10 C15.44756,10 13.208984,7.7614241 13.208984,5 C13.208984,2.2385764 15.44756,-4.8935362E-08 18.208984,0 z M5,0 C7.7614241,-4.8935362E-08 10,2.2385764 10,5 C10,7.7614241 7.7614241,10 5,10 C2.2385764,10 0,7.7614241 0,5 C0,2.2385764 2.2385764,-4.8935362E-08 5,0 z" 
                              Fill="Gray" 
                              SnapsToDevicePixels="True" 
                              Stretch="Uniform" 
                              UseLayoutRounding="False" /> 
                        </Grid> 
                    </ControlTemplate> 
                </Setter.Value> 
            </Setter> 
        </Style> 
 
 
        <Style  TargetType="syncfusion:GroupDropArea"> 
            <Setter Property="Background" Value="White" /> 
            <Setter Property="Foreground" Value="Gray" /> 
            <Setter Property="BorderBrush" Value="Gray" /> 
            <Setter Property="BorderThickness" Value="1,1,1,0" /> 
            <Setter Property="Focusable" Value="False" /> 
            <Setter Property="IsTabStop" Value="False" /> 
            <Setter Property="Template"> 
                <Setter.Value> 
                    <ControlTemplate TargetType="syncfusion:GroupDropArea"> 
                        <Border BorderBrush="{TemplateBinding BorderBrush}" 
                            BorderThickness="{TemplateBinding BorderThickness}" 
                            SnapsToDevicePixels="True"> 
                            <VisualStateManager.VisualStateGroups> 
                                <VisualStateGroup x:Name="ExpansionStates"> 
                                    <VisualStateGroup.Transitions> 
                                        <VisualTransition GeneratedDuration="0" /> 
                                    </VisualStateGroup.Transitions> 
                                    <VisualState x:Name="Collapsed"> 
                                        <Storyboard> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_GroupDropAreaBorder" Storyboard.TargetProperty="(FrameworkElement.Margin)"> 
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0"> 
                                                    <DiscreteObjectKeyFrame.Value> 
                                                        <Thickness>0,0,0,0</Thickness> 
                                                    </DiscreteObjectKeyFrame.Value> 
                                                </DiscreteObjectKeyFrame> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_GroupDropAreaBorder" Storyboard.TargetProperty="(FrameworkElement.Height)"> 
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"> 
                                                    <EasingDoubleKeyFrame.EasingFunction> 
                                                        <CircleEase /> 
                                                    </EasingDoubleKeyFrame.EasingFunction> 
                                                </EasingDoubleKeyFrame> 
                                            </DoubleAnimationUsingKeyFrames> 
                                        </Storyboard> 
                                    </VisualState> 
                                    <VisualState x:Name="Expanded"> 
                                        <Storyboard> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_GroupDropAreaBorder" Storyboard.TargetProperty="(FrameworkElement.Margin)"> 
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0"> 
                                                    <DiscreteObjectKeyFrame.Value> 
                                                        <Thickness>0,0,0,20</Thickness> 
                                                    </DiscreteObjectKeyFrame.Value> 
                                                </DiscreteObjectKeyFrame> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_GroupDropAreaBorder" Storyboard.TargetProperty="(FrameworkElement.Height)"> 
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="28"> 
                                                    <EasingDoubleKeyFrame.EasingFunction> 
                                                        <CircleEase /> 
                                                    </EasingDoubleKeyFrame.EasingFunction> 
                                                </EasingDoubleKeyFrame> 
                                            </DoubleAnimationUsingKeyFrames> 
                                        </Storyboard> 
                                    </VisualState> 
                                </VisualStateGroup> 
                            </VisualStateManager.VisualStateGroups> 
                            <Grid Background="{TemplateBinding Background}"> 
                                <Grid.RowDefinitions> 
                                    <RowDefinition x:Name="rd0" Height="Auto" /> 
                                    <RowDefinition x:Name="rd1" Height="*" /> 
                                </Grid.RowDefinitions> 
                                <Grid.ColumnDefinitions> 
                                    <ColumnDefinition x:Name="cd0" Width="*" /> 
                                    <ColumnDefinition x:Name="cd1" Width="Auto" /> 
                                </Grid.ColumnDefinitions> 
                                <ToggleButton Grid.Row="0" 
                                          Grid.Column="1" 
                                          Width="45" 
                                          Height="12" 
                                          Margin="2" 
                                          Background="Transparent" 
                                          IsChecked="{Binding Path=IsExpanded, 
                                                              RelativeSource={RelativeSource TemplatedParent}, 
                                                              Mode=TwoWay}" 
                                          IsTabStop="False" 
                                          IsThreeState="False" 
                                          SnapsToDevicePixels="True" 
                                          Style="{StaticResource ToggleButtonStyle}" /> 
                                <Border Name="PART_GroupDropAreaBorder" 
                                    Grid.Row="1" 
                                    Grid.Column="0" 
                                    Grid.ColumnSpan="1" 
                                    Height="0" 
                                    SnapsToDevicePixels="True"> 
                                    <Grid x:Name="PART_GroupDropAreaGrid" 
                                      MaxHeight="30" 
 
                                // Change Alignment of WaterMarktext. 
 
                                      Margin="5,0,0,0"> 
                                        <Grid HorizontalAlignment="Left" 
                                          VerticalAlignment="Top" 
                                          Opacity="0.5" 
                                          Visibility="{TemplateBinding WatermarkTextVisibility}"> 
 
                                       //Remove Dotted line around watermark text 
 
                                            <!--<Rectangle RadiusX="5" 
                                                   RadiusY="5" 
                                                   SnapsToDevicePixels="True" 
                                                   Stroke="{TemplateBinding Foreground}" 
                                                   StrokeDashArray="5,5" 
                                                   StrokeThickness="1" />--> 
                                            <TextBlock  
                                                   HorizontalAlignment="Center" 
                                                   VerticalAlignment="Center" 
                                                   FontSize="14" 
                                                   Foreground="{TemplateBinding Foreground}" 
                                                   Text="{TemplateBinding GroupDropAreaText}" /> 
                                        </Grid> 
                                        <StackPanel Name="PART_StackPanel" 
                                                MaxHeight="30" 
                                                Orientation="Horizontal" /> 
                                    </Grid> 
                                </Border> 
                            </Grid> 
                        </Border> 
                    </ControlTemplate> 
                </Setter.Value> 
            </Setter> 
        </Style> 
 
 
 
Please download the sample from the below location. 
 
 
 
Regards, 
Srinivasan 


BAO YADONG
Replied On July 18, 2017 04:58 AM

Thanks a lot. It works like expected with minor modification.


Srinivasan Vasu [Syncfusion]
Replied On July 18, 2017 05:44 AM

Hi Bao, 
  
Thanks for your response. 
  
Please let us know if you need further assistance. 
  
Regards, 
Srinivasan 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

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.

;