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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Horizontal Scroll Bar Overlaps Last Row

Thread ID:

Created:

Updated:

Platform:

Replies:

127828 Dec 12,2016 07:12 AM UTC Mar 24,2017 12:59 PM UTC UWP 5
loading
Tags: SfDataGrid
David Harvey
Asked On December 12, 2016 07:12 AM UTC

It appears as if the horizontal scroll bar takes up part of the SfDataGrid view.  If the SfDataGrid view is full, the horizontal scroll bar will overlap the bottom row that is displayed within this SfDataGrid.

Is it possible to prevent this?  I would suspect that since the ScrollViewer is part of SfDataGrid it has no choice but to overlap the last row?  So I guess the next choice is to allow SfDataGrid to scroll lower than all available data (and thus display empty rows which can be overlapped) or perhaps some other option?

Thank you.

Jai Ganesh S [Syncfusion]
Replied On December 14, 2016 02:22 PM UTC

Hi David, 
A support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates 
 
Regards, 
Jai Ganesh S 


Alexandru Pastor Opris
Replied On March 22, 2017 04:32 PM UTC

Hello,

We're having exactly the same issue, except we're having this issue with both horizontal and vertical scrollbars. They're taking up a part of the SfDataGrid view as David said.
I've attached a sample with our issue using Syncfusion v15.1.0.37. On the sample there's a small DataGrid, but on a project we have a bigger DataGrid with more columns, here we just limited the size of the DataGrid for the sample.

Would like to know how we could resolve this, is there any way we could move the scrollbars outside of the DataGrid or any other solution for this?

Thanks and have a nice day.

Attachment: ScrollbarSample_7861184d.rar

Jai Ganesh S [Syncfusion]
Replied On March 23, 2017 10:45 AM UTC

 
Hi Alexandru, 
 
We have analyzed your query and you can achieve your requirement to edit the style for default scrolviewer and remove the column and row span in ScrollContentPresenter like below, 
 
    <Style TargetType="ScrollViewer"> 
            <Setter Property="HorizontalScrollMode" Value="Auto" /> 
            <Setter Property="VerticalScrollMode" Value="Auto" /> 
            <Setter Property="IsHorizontalRailEnabled" Value="True" /> 
            <Setter Property="IsVerticalRailEnabled" Value="True" /> 
            <Setter Property="IsTabStop" Value="False" /> 
            <Setter Property="ZoomMode" Value="Disabled" /> 
            <Setter Property="HorizontalContentAlignment" Value="Left" /> 
            <Setter Property="VerticalContentAlignment" Value="Top" /> 
            <Setter Property="VerticalScrollBarVisibility" Value="Visible" /> 
            <Setter Property="Padding" Value="0" /> 
            <Setter Property="BorderThickness" Value="0" /> 
            <Setter Property="BorderBrush" Value="Transparent" /> 
            <Setter Property="Background" Value="Transparent" /> 
            <Setter Property="Template"> 
                <Setter.Value> 
                    <ControlTemplate TargetType="ScrollViewer"> 
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> 
                            <VisualStateManager.VisualStateGroups> 
                                <VisualStateGroup x:Name="ScrollingIndicatorStates"> 
                                    <VisualStateGroup.Transitions> 
                                        <VisualTransition From="MouseIndicator" To="NoIndicator"> 
                                            <Storyboard> 
                                                <FadeOutThemeAnimation TargetName="ScrollBarSeparator" BeginTime="0:0:3" /> 
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar" 
                                             Storyboard.TargetProperty="IndicatorMode"> 
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:3"> 
                                                        <DiscreteObjectKeyFrame.Value> 
                                                            <ScrollingIndicatorMode>None</ScrollingIndicatorMode> 
                                                        </DiscreteObjectKeyFrame.Value> 
                                                    </DiscreteObjectKeyFrame> 
                                                </ObjectAnimationUsingKeyFrames> 
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar" 
                                             Storyboard.TargetProperty="IndicatorMode"> 
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:3"> 
                                                        <DiscreteObjectKeyFrame.Value> 
                                                            <ScrollingIndicatorMode>None</ScrollingIndicatorMode> 
                                                        </DiscreteObjectKeyFrame.Value> 
                                                    </DiscreteObjectKeyFrame> 
                                                </ObjectAnimationUsingKeyFrames> 
                                            </Storyboard> 
                                        </VisualTransition> 
                                        <VisualTransition From="TouchIndicator" To="NoIndicator"> 
                                            <Storyboard> 
                                                <FadeOutThemeAnimation TargetName="ScrollBarSeparator" /> 
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar" 
                                             Storyboard.TargetProperty="IndicatorMode"> 
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.5"> 
                                                        <DiscreteObjectKeyFrame.Value> 
                                                            <ScrollingIndicatorMode>None</ScrollingIndicatorMode> 
                                                        </DiscreteObjectKeyFrame.Value> 
                                                    </DiscreteObjectKeyFrame> 
                                                </ObjectAnimationUsingKeyFrames> 
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar" 
                                             Storyboard.TargetProperty="IndicatorMode"> 
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.5"> 
                                                        <DiscreteObjectKeyFrame.Value> 
                                                            <ScrollingIndicatorMode>None</ScrollingIndicatorMode> 
                                                        </DiscreteObjectKeyFrame.Value> 
                                                    </DiscreteObjectKeyFrame> 
                                                </ObjectAnimationUsingKeyFrames> 
                                            </Storyboard> 
                                        </VisualTransition> 
                                    </VisualStateGroup.Transitions> 
 
                                    <VisualState x:Name="NoIndicator"> 
                                        <Storyboard> 
                                            <FadeOutThemeAnimation TargetName="ScrollBarSeparator" /> 
                                        </Storyboard> 
                                    </VisualState> 
                                    <VisualState x:Name="TouchIndicator"> 
                                        <Storyboard> 
                                            <FadeOutThemeAnimation TargetName="ScrollBarSeparator" /> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar" 
                                           Storyboard.TargetProperty="IndicatorMode" 
                                           Duration="0"> 
                                                <DiscreteObjectKeyFrame KeyTime="0"> 
                                                    <DiscreteObjectKeyFrame.Value> 
                                                        <ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode> 
                                                    </DiscreteObjectKeyFrame.Value> 
                                                </DiscreteObjectKeyFrame> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar" 
                                           Storyboard.TargetProperty="IndicatorMode" 
                                           Duration="0"> 
                                                <DiscreteObjectKeyFrame KeyTime="0"> 
                                                    <DiscreteObjectKeyFrame.Value> 
                                                        <ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode> 
                                                    </DiscreteObjectKeyFrame.Value> 
                                                </DiscreteObjectKeyFrame> 
                                            </ObjectAnimationUsingKeyFrames> 
                                        </Storyboard> 
                                    </VisualState> 
                                    <VisualState x:Name="MouseIndicator"> 
                                        <Storyboard> 
                                            <FadeInThemeAnimation TargetName="ScrollBarSeparator" /> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar" 
                                           Storyboard.TargetProperty="IndicatorMode" 
                                           Duration="0"> 
                                                <DiscreteObjectKeyFrame KeyTime="0"> 
                                                    <DiscreteObjectKeyFrame.Value> 
                                                        <ScrollingIndicatorMode>MouseIndicator</ScrollingIndicatorMode> 
                                                    </DiscreteObjectKeyFrame.Value> 
                                                </DiscreteObjectKeyFrame> 
                                            </ObjectAnimationUsingKeyFrames> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar" 
                                           Storyboard.TargetProperty="IndicatorMode" 
                                           Duration="0"> 
                                                <DiscreteObjectKeyFrame KeyTime="0"> 
                                                    <DiscreteObjectKeyFrame.Value> 
                                                        <ScrollingIndicatorMode>MouseIndicator</ScrollingIndicatorMode> 
                                                    </DiscreteObjectKeyFrame.Value> 
                                                </DiscreteObjectKeyFrame> 
                                            </ObjectAnimationUsingKeyFrames> 
                                        </Storyboard> 
                                    </VisualState> 
                                </VisualStateGroup> 
                            </VisualStateManager.VisualStateGroups> 
                            <Grid Background="{TemplateBinding Background}"> 
                                <Grid.ColumnDefinitions> 
                                    <ColumnDefinition Width="*" /> 
                                    <ColumnDefinition Width="Auto" /> 
                                </Grid.ColumnDefinitions> 
                                <Grid.RowDefinitions> 
                                    <RowDefinition Height="*" /> 
                                    <RowDefinition Height="Auto" /> 
                                </Grid.RowDefinitions> 
                                 
                                <ScrollContentPresenter x:Name="ScrollContentPresenter" 
                                          ContentTemplate="{TemplateBinding ContentTemplate}" 
                                          Margin="{TemplateBinding Padding}"/> 
                                 
                                <ScrollBar   x:Name="VerticalScrollBar" 
                                     Grid.Column="1"                                              
                                     IsTabStop="False" 
                                     Maximum="{TemplateBinding ScrollableHeight}" 
                                     Orientation="Vertical" 
                                     Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
                                     Value="{TemplateBinding VerticalOffset}" 
                                     ViewportSize="{TemplateBinding ViewportHeight}" 
                                     HorizontalAlignment="Right" /> 
                                <ScrollBar x:Name="HorizontalScrollBar" 
                                         IsTabStop="False" 
                                         Maximum="{TemplateBinding ScrollableWidth}" 
                                         Orientation="Horizontal" 
                                         Grid.Row="1" 
                                           Height="15" 
                                         Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" 
                                         Value="{TemplateBinding HorizontalOffset}" 
                                         ViewportSize="{TemplateBinding ViewportWidth}" /> 
                                <Border x:Name="ScrollBarSeparator" 
              Grid.Row="1" 
              Grid.Column="1" 
              Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}" /> 
                            </Grid> 
                        </Border> 
                    </ControlTemplate> 
                </Setter.Value> 
            </Setter> 
        </Style> 
 
 
Regards, 
Jai Ganesh S 


Alexandru Pastor Opris
Replied On March 23, 2017 01:01 PM UTC

Hello Jai Ganesh,

That does solve the problem, but the VisualContainer has a left and bottom border which when the scrollbar fades out it looks really strange and bad at the same time. Is there any way to always make the scrollbars visible all the time when there is the need to scroll data? If there isn't hide the scrollbar.
I've tried with VerticalScrollBarVisibility from Auto to Visible but it isn't working, I still have to focus inside of the DataGrid for the scrollbars to show.

Here's a screenshot as sample of the "double" border which I'm talking about.


Thanks and have a nice day,
Alexandru.

Jai Ganesh S [Syncfusion]
Replied On March 24, 2017 12:59 PM UTC

Hi Alexandru, 
 
Sorry for the inconvenience. You can achieve your requirement for always showing the Horizontal and verticalscrollbar by setting the IndicatorMode property as MouseIndicator for both Vertical ScrollBar  and Horizontal ScrollBar. 
   <Style TargetType="ScrollViewer"> 
            <Setter Property="HorizontalScrollMode" Value="Enabled" /> 
            <Setter Property="VerticalScrollMode" Value="Enabled" /> 
            <Setter Property="IsHorizontalRailEnabled" Value="True" /> 
            <Setter Property="IsVerticalRailEnabled" Value="True" /> 
            <Setter Property="IsTabStop" Value="False" /> 
            <Setter Property="ZoomMode" Value="Disabled" /> 
            <Setter Property="HorizontalContentAlignment" Value="Left" /> 
            <Setter Property="VerticalContentAlignment" Value="Top" /> 
            <Setter Property="VerticalScrollBarVisibility" Value="Visible" /> 
            <Setter Property="HorizontalScrollBarVisibility" Value="Visible"/> 
            <Setter Property="Padding" Value="0" /> 
            <Setter Property="BorderThickness" Value="0" /> 
            <Setter Property="BorderBrush" Value="Transparent" /> 
            <Setter Property="Background" Value="Transparent" /> 
            <Setter Property="Template"> 
                <Setter.Value> 
                    <ControlTemplate TargetType="ScrollViewer"> 
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> 
                            <Grid Background="{TemplateBinding Background}"> 
                                <Grid.ColumnDefinitions> 
                                    <ColumnDefinition Width="*" /> 
                                    <ColumnDefinition Width="Auto" /> 
                                </Grid.ColumnDefinitions> 
                                <Grid.RowDefinitions> 
                                    <RowDefinition Height="*" /> 
                                    <RowDefinition Height="Auto" /> 
                                </Grid.RowDefinitions> 
                                <ScrollContentPresenter x:Name="ScrollContentPresenter" 
                              ContentTemplate="{TemplateBinding ContentTemplate}" 
                              Margin="{TemplateBinding Padding}" /> 
                                <ScrollBar x:Name="VerticalScrollBar" 
                 Grid.Column="1" 
                 IsTabStop="False" 
                 IndicatorMode="MouseIndicator" 
                 Maximum="{TemplateBinding ScrollableHeight}" 
                 Orientation="Vertical" 
                 Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
                 Value="{TemplateBinding VerticalOffset}" 
                 ViewportSize="{TemplateBinding ViewportHeight}" 
                 HorizontalAlignment="Right" /> 
                                <ScrollBar x:Name="HorizontalScrollBar" 
                 IsTabStop="False" 
                 Maximum="{TemplateBinding ScrollableWidth}" 
                 Orientation="Horizontal" 
                 Grid.Row="1" 
                 Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" 
                 Value="{TemplateBinding HorizontalOffset}" 
                 IndicatorMode="MouseIndicator" 
                 ViewportSize="{TemplateBinding ViewportWidth}" /> 
                                <Border x:Name="ScrollBarSeparator" 
              Grid.Row="1" 
              Grid.Column="1" 
              Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}" /> 
                            </Grid> 
                        </Border> 
                    </ControlTemplate> 
                </Setter.Value> 
            </Setter> 
        </Style> 
 
Regards, 
Jai Ganesh S 


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.

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

;