Horizontal Scrollbar Staying Visible When It Should Be Hidden

[Scott]

Hello Telerik Team,

I am using Silverilght 4 and Telerik File Version 2011.3.1116.1040.

My initial requirement was to make the Horizontal Scrollbar of the RadGridView scroll to the far right when the scrollbar is Visible, meaning that there would be Columns off screen.  At first, I was simply doing the following which seemingly worked:

this.PaymentsGridView.ScrollIntoViewAsync
(
    this.PaymentsGridView.Items[0],
    this.PaymentsGridView.Columns[this.PaymentsGridView.Columns.Count - 1],
    null
);

Until ... I soon discovered an issue where the RadGridView's Horizontal Scrollbar stays Visible even though it's set to Auto and all Columns are within view.  This happens when the RadGridView's Width shrinks back down due to 2 other panes that are to the left of the RadGridView whose visibility gets toggled on and off by clicking their headers.  The scrollbar would be present, but if you were to click once on the Vertical Scrollbar the Horizontal Scrollbar would disappear.  This is obviously not what I want.

My attempt to solve the issue had me subscribing to the SizeChangedEventHandler.  I would pass e.NewSize.Width to a method that would loop through the Columns aggregating each column's ActualWidth.  If the Total Columns Width was greater than the New Grid Actual Width then we know that we need to show the Horizontal Scrollbar and scroll it to the far right via the code snippet above, otherwise we know that all Columns are within view so I can safely set the Horizontal Scrollbar to Hidden. 

This, however, does work in all cases.  When the SizeChangedEventHanlder is fired and the e.NewSize.Width is passed to my method, it seems to be the correct new width but, when I loop through the Columns, each Column retains its previous width, thus throwing off the calculation.

So the question becomes, "How do I a) get the New Actual Width for each Column or b) get the Horizontal Scrollbar to work correctly, as it should, when set to Auto?"

Here is my Method:

private void ScrollPaymentGridViewToTheFarRight(double gridWidth)
{
    double columnsWidth = 15.0; // TODO: account for vertical scrollbar.

    foreach (double col in this.PaymentsGridView.Columns)
        columnsWidth += col.ActualWidth;

        if (columnsWidth > gridWidth)
        {
            ScrollViewer.SetHorizontalScrollBarVisibility(this.PaymentsGridView, ScrollBarVisibility.Auto);
            this.PaymentsGridView.ScrollIntoViewAsync
            (
                this.PaymentsGridView.Items[0],
                this.PaymentsGridView.Columns[this.PaymentsGridView.Columns.Count - 1],
                null
            );
        }
        else
        {
            ScrollViewer.SetHorizontalScrollBarVisibility(this.PaymentsGridView, ScrollBarVisibility.Hidden);
        }
    }
}

Here is my RadGridView XAML:

<telerik:RadGridView
    x:Name="PaymentsGridView"
    GridLinesVisibility="Vertical"
    AlternationCount="2"
    AutoGenerateColumns="False"
    CanUserFreezeColumns="False"
    CanUserReorderColumns="False"
    CanUserSelect="False"
    CanUserSortColumns="True"
    Background="DarkGray"
    BorderBrush="Transparent"
    BorderThickness="0"
    Foreground="Black"
    IsReadOnly="True"
    IsFilteringAllowed="True"
    RowIndicatorVisibility="Collapsed"
    ScrollMode="RealTime"
    ShowColumnFooters="True"
    ShowGroupFooters="False"
    ShowGroupPanel="False"
    RowStyle="{StaticResource rgvRowStyle}"
    AlternateRowStyle="{StaticResource rgvAlternateRowStyle}"
    HeaderRowStyle="{StaticResource rgvHeaderRowStyle}"
    FooterRowStyle="{StaticResource rgvFooterRowStyle}">

    <telerik:RadGridView.Columns>

        <telerik:GridViewDataColumn
            Header="Status"
            Footer="Totals:"
            DataMemberBinding="{Binding Status}"
            HeaderCellStyle="{StaticResource rgvHeaderCellStyle}"
            FooterCellStyle="{StaticResource rgvFooterCellStyle}"
            CellStyle="{StaticResource rgvCellStyle}"
            HeaderTextAlignment="Left"
            FooterTextAlignment="Left"
            TextAlignment="Left"
            Width="Auto" />

        <telerik:GridViewDataColumn
            Header="Vendor #"
            DataMemberBinding="{Binding VendorNumber}"
            HeaderCellStyle="{StaticResource rgvHeaderCellStyle}"
            FooterCellStyle="{StaticResource rgvFooterCellStyle}"
            CellStyle="{StaticResource rgvCellStyle}"
            HeaderTextAlignment="Left"
            TextAlignment="Left"
            Width="Auto" />

        <telerik:GridViewDataColumn
            Header="Vendor Name"
            DataMemberBinding="{Binding VendorName}"
            HeaderCellStyle="{StaticResource rgvHeaderCellStyle}"
            FooterCellStyle="{StaticResource rgvFooterCellStyle}"
            CellStyle="{StaticResource rgvCellStyle}"
            HeaderTextAlignment="Left"
            TextAlignment="Left"
            Width="*"
            MinWidth="225" />

        <telerik:GridViewDataColumn
            Header="Input Date"
            DataMemberBinding="{Binding InputDateKey, Converter={StaticResource DateKeyConverter}}"
            HeaderCellStyle="{StaticResource rgvHeaderCellStyle}"
            FooterCellStyle="{StaticResource rgvFooterCellStyle}"
            CellStyle="{StaticResource rgvCellStyle}"
            HeaderTextAlignment="Left"
            TextAlignment="Left"
            Width="Auto" />

        <telerik:GridViewDataColumn
            Header="Period"
            DataMemberBinding="{Binding Period}"
            HeaderCellStyle="{StaticResource rgvHeaderCellStyle}"
            FooterCellStyle="{StaticResource rgvFooterCellStyle}"
            CellStyle="{StaticResource rgvCellStyle}"
            HeaderTextAlignment="Left"
            TextAlignment="Left"
            Width="Auto" />

        <telerik:GridViewDataColumn
            Header="Total Voucher"
            DataMemberBinding="{Binding TotalVoucherAmount, Converter={StaticResource Currency2Converter}}"
            HeaderCellStyle="{StaticResource rgvHeaderCellStyle}"
            FooterCellStyle="{StaticResource rgvFooterCellStyle}"
            CellStyle="{StaticResource rgvCellStyle}"
            HeaderTextAlignment="Right"
            TextAlignment="Right"
            Width="Auto">
            <telerik:GridViewColumn.AggregateFunctions>
                <telerik:SumFunction ResultFormatString="{}{0:c}" />
            </telerik:GridViewColumn.AggregateFunctions>
        </telerik:GridViewDataColumn>

        <telerik:GridViewDataColumn
            Header="Research"
            DataMemberBinding="{Binding ResearchAmount, Converter={StaticResource Currency2Converter}}"
            HeaderCellStyle="{StaticResource rgvHeaderCellStyle}"
            FooterCellStyle="{StaticResource rgvFooterCellStyle}"
            CellStyle="{StaticResource rgvCellStyle}"
            HeaderTextAlignment="Right"
            TextAlignment="Right"
            Width="Auto">
            <telerik:GridViewColumn.AggregateFunctions>
                <telerik:SumFunction ResultFormatString="{}{0:c}" />
            </telerik:GridViewColumn.AggregateFunctions>
        </telerik:GridViewDataColumn>

    </telerik:RadGridView.Columns>
</telerik:RadGridView>

 

[Dimitrina]

Hello,

I have tested your code in a test application with your version and with the latest version we ship for Silverlight 4. Unfortunately I could not reproduce the scroll bar to be visible when it should be hidden. 

I have attached a demo project. Please check it and let me know what have I missed.

Regards,
Didie
Telerik

[Scott]

Hello Didie,

Thank you for responding.  I looked at your demo project and found that it wasn't testing what I described in my post.  I was able to update the demo project to reproduce the error, however, I can't zip it up and attach it as a file, as you only accept image file types.  So, I'll just post the code instead.  But, before I do, let me explain what I've done.


Here are some things to note about my changes:

I added 3 columns to the LayoutRoot Grid.  In the first 2 columns, I added 2 Rectangle Panes (Red and Blue) and in the 3rd column, the RadGridView.  The 2 Buttons that you had in the demo are now associated with these Red and Blue panes, respectively.  Both buttons are wired to the same event handler, wherein I toggle the visibility of each button's associated pane.  Due to the RadGridView having its HorizontalAlignment property set to Stretch, when the visibility of either pane is toggled, the size of the RadGridView is affected, which, in turn, causes the SizeChanged event to fire.  I also had to update the Width properties of the RadGridViewDataColumns, as they weren't set like I had them where at least one was Star and the rest were Auto. 


Here are the steps to reproduce the error:

1. Hit F5 to run the project.
2. Make sure that the window is maximized (my resolution is 1600 x 1200 if you want to be thorough).
3. Click the Button that says Hide Blue Pane.
4. Take note that the RadGridView should have no Horizontal Scrollbar.
5. Click the Button that says Show Blue Pane. 
6. Take note that the Horizontal Scrollbar appears. *** THIS IS THE ERROR ***
7. Click and hold the Horizontal Scrollbar Thumb and try to drag.
8. Take note that the Horizontal Scrollbar disappears.

 

Here is the updated XAML:
 

<UserControl
    x:Class="RadGridView_SL5_AR_1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:my="clr-namespace:RadGridView_SL5_AR_1"
    mc:Ignorable="d"
    d:DesignHeight="700"
    d:DesignWidth="700">

    <UserControl.Resources>
        <my:MyViewModel x:Key="MyViewModel" />
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot"
        Background="White"
        DataContext="{StaticResource MyViewModel}">

        <Grid.RowDefinitions>
             <RowDefinition Height="*" />
             <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Grid.Resources>
            <DataTemplate x:Key="RowDetailsTemplate">
                <telerik:RadGridView
                     Name="playersGrid"
                     ItemsSource="{Binding Players}"
                     AutoGenerateColumns="False">
                    <telerik:RadGridView.Columns>
                        <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}" />
                        <telerik:GridViewDataColumn DataMemberBinding="{Binding Number}" />
                        <telerik:GridViewDataColumn DataMemberBinding="{Binding Position}" />
                        <telerik:GridViewDataColumn DataMemberBinding="{Binding Country}" />
                    </telerik:RadGridView.Columns>
                </telerik:RadGridView>
            </DataTemplate>
        </Grid.Resources>

        <Rectangle
            x:Name="Pane1"
            Width="500"
            Fill="Red"
            VerticalAlignment="Stretch"
            Grid.Row="0"
            Grid.Column="0" />

        <Rectangle
            x:Name="Pane2"
            Width="500"
            Fill="Blue"
            VerticalAlignment="Stretch"
            Grid.Row="0"
            Grid.Column="1" />

        <telerik:RadGridView
            Grid.Row="0"
            Grid.Column="2"
            Name="PaymentsGridView"
            ItemsSource="{Binding Clubs}"
            GridLinesVisibility="Vertical"
            AlternationCount="2"
            AutoGenerateColumns="False"
            CanUserFreezeColumns="False"
            CanUserReorderColumns="False"
            CanUserSelect="False"
            CanUserSortColumns="True"
            Background="DarkGray"
            BorderBrush="Transparent"
            BorderThickness="0"
            Foreground="Black"
            IsReadOnly="True"
            IsFilteringAllowed="True"
            RowIndicatorVisibility="Collapsed"
            ScrollMode="RealTime"
            ShowColumnFooters="True"
            ShowGroupFooters="False"
            ShowGroupPanel="False"
            HorizontalAlignment="Stretch">

            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}" Width="*" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Established}" Header="Est." DataFormatString="{}{0:yyyy}" Width="Auto" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding StadiumCapacity}" Header="Stadium" DataFormatString="{}{0:N0}" Width="Auto" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}" Width="*" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Established}" Header="Est." DataFormatString="{}{0:yyyy}" Width="Auto" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding StadiumCapacity}" Header="Stadium" DataFormatString="{}{0:N0}" Width="Auto" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}" Width="*" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding Established}" Header="Est." DataFormatString="{}{0:yyyy}" Width="Auto" />
                <telerik:GridViewDataColumn DataMemberBinding="{Binding StadiumCapacity}" Header="Stadium" DataFormatString="{}{0:N0}" Width="Auto" />
            </telerik:RadGridView.Columns>

        </telerik:RadGridView>

        <StackPanel Grid.Row="1" Orientation="Horizontal">

            <Button
                Name="Button1"
                Content="Hide Red Pane"
                Margin="5"
                HorizontalAlignment="Left" />

            <Button
                Name="Button2"
                Content="Hide Blue Pane"
                Margin="5"
                HorizontalAlignment="Left" />

        </StackPanel>

    </Grid>

</UserControl>

Here is the updated C#:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

using Telerik.Windows.Controls;
using Telerik.Windows.Data;

namespace RadGridView_SL5_AR_1
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            this.Button1.Click += new RoutedEventHandler(Button_Click);
            this.Button2.Click += new RoutedEventHandler(Button_Click);

            this.PaymentsGridView.SizeChanged += new SizeChangedEventHandler(PaymentsGridView_SizeChanged);
        }

        protected void Button_Click(object sender, RoutedEventArgs e)
        {
            Button button = sender as Button;

            string text = button.Content.ToString();
            bool isRed = text.Contains("Red");
            bool isBlue = text.Contains("Blue");
            bool isVisible = text.Contains("Hide");
            bool isHidden = text.Contains("Show");

            Rectangle rect = isRed ? this.Pane1 : this.Pane2;

            button.Content = isVisible ? text.Replace("Hide", "Show") : text.Replace("Show", "Hide");
            rect.Visibility = isVisible ? Visibility.Collapsed : Visibility.Visible;
        }

        protected void PaymentsGridView_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            double columnsWidth = 0.0;

            foreach (GridViewDataColumn col in this.PaymentsGridView.Columns)
                columnsWidth += col.ActualWidth;

            if (columnsWidth > e.NewSize.Width)
            {
                ScrollViewer.SetHorizontalScrollBarVisibility(this.PaymentsGridView, ScrollBarVisibility.Auto);
                this.PaymentsGridView.ScrollIntoViewAsync
                (
                    this.PaymentsGridView.Items[0],
                    this.PaymentsGridView.Columns[this.PaymentsGridView.Columns.Count - 1],
                    null
                );
            }
            else
            {
                ScrollViewer.SetHorizontalScrollBarVisibility(this.PaymentsGridView, ScrollBarVisibility.Hidden);
            }
        }
    }
}

[Dimitrina]

Hello,

Thank you for sharing the source code.

I updated the test project and I were able to reproduce the issue with slightly different steps than you listed. We have logged the issue for a further investigation.  

As a workaround I can suggest you to set a fixed Width for the third Grid.ColumnDefinition.
For example:

<Grid.ColumnDefinitions>
     <ColumnDefinition Width="Auto" />
     <ColumnDefinition Width="Auto" />
     <ColumnDefinition Width="1000" />
 </Grid.ColumnDefinitions>

I apologize for the inconvenience. I have updated your Telerik points.

Regards,
Didie
Telerik