GroupDropArea

[Juraj Tomana]

Hi.

How can I do GroupDropArea smaller, please?

Thanks.

Regards,

Juraj

[Saravanan C]

Hi Suraj,

 

Thank you for contacting Syncfusion Support,

 

We have analyzed your requirement “to make GroupDropArea smaller” and you can achieve your requirement by apply style to GroupDropArea. And you can achieve minimized GroupDropArea by setting  IsGroupDropArea=”False”. Please refer the following code snippet:

 

Code Snippet[XAML]:

<Window.Resources>

    <Style TargetType="syncfusion:GroupDropArea">

        <Setter Property="Height" Value="80"></Setter>

    </Style>

</Window.Resources>

 

<Syncfusion:SfDataGrid x:Name=”dataGrid”

                               ItemsSource=”{Binding Path=OrdersDetails}”

                               AllowDraggingColumns=”True”

                               ShowGroupDropArea=”True”

                               AllowGrouping=”True”

                               GroupDropAreaText=”Hai”

                               IsGroupDropAreaExpanded=”False”

                               AutoExpandGroups=”True”

                               ColumnSizer=”Star”>

 

We have prepared a sample based on your requirement please find the sample in the attachments.

 

Please let us know if  this solution helps you.

 

Regards,

Saravanan C

Attachment: ColumnHeaderDraggingTextBox_b852d759.zip

[Juraj Tomana]

Hi.

Thanks, but of course I know, that GroupDropArea can be expanded. But I want to set style of this area to make it thiner in expanded state.

See attached screenshot...

Regards,

Juraj

Attachment: 116317_dec70278.zip

[Saravanan C]

Hi Juraj,

 

We have analyzed your query to thinner GroupDropArea and it can be achieved by applying style to GroupDropArea. By adjusting the property Opacity=”0.5” you can achieve your requirement. And also you can adjust the height for GroupDropArea by setting the property MinHeight=”0” and MaxHeight=”80”. Please find the code snippet in below:

 

Code Snippet[XAML]:   

<Style TargetType=”yncfusion:GroupDropArea”>

            <Setter Property=”MinHeight” Value=”0”/>

            <Setter Property=”MaxHeight” Value=”80”/>

            <Setter Property=”BorderThickness” Value=”1,1,1,0”/>

            <Setter Property=”Opacity” Value=”0.3”/>

            <Setter Property=”Background” Value=”LightBlue”/>

            <Setter Property=”Foreground” Value=”Gray”/>

</Style>

 

We have prepared a sample based on your requirement. Please find the sample in the attachments.

 

Please let us know if  this solution helps you.

 

Thanks,

Saravanan C

 

Attachment: GroupDropArea_557e5caa.zip

[Juraj Tomana]

Hi.

See attached screenshot..

I really want to reduce the space below 'PART_GroupDropAreaBorder'. (Or maybe it would be even better, it this PART_GroupDropAreaBorder doesn't fixed height (==28), but Height=NaN;

Thanks.

Regards,

Juraj

Attachment: gdascr_c167487e.zip

[Saravanan C]

Hi Juraj,

 

We have analyzed your requirement “to reduce the unused space in below PART_GroupDropAreaBorder when expanded state” and you can achieve your requirement by editing the GroupDropArea control template. Please find the code snippet in below:

 

Code Snippet[XAML]:

<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,0</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>

 

Please find the attached sample based on your requirement.

 

Please let us know the provided solution helps you.

 

Thanks,

Saravanan C

Attachment: PART_GroupDropArea_446d2b80.zip