How to customize datagrid GroupDropArea?

[BAO YADONG]

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]

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. 

 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/WPF1305991747.zip 

 

 

Regards, 

Srinivasan 

[BAO YADONG]

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

[Srinivasan Vasu]

Hi Bao, 

  

Thanks for your response. 

  

Please let us know if you need further assistance. 

  

Regards, 

Srinivasan