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

Horizontal Scroll Bar Overlaps Last Row

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.

5 Replies

JG Jai Ganesh S Syncfusion Team 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 



AP Alexandru Pastor Opris 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


JG Jai Ganesh S Syncfusion Team 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 



AP Alexandru Pastor Opris 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.


JG Jai Ganesh S Syncfusion Team 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 


Loader.
Live Chat Icon For mobile
Up arrow icon