How to use Scroll bar in Grid ?

[Parul]

Hi All,

I am using RadGridView for my WPF application and want to display vertical and horizontal scroll bar whenever the number of colums and rows are more.

I have set its Styles as folows :

<Style TargetType="{x:Type telerik:RadGridView}">
        <Setter Property="HeaderRowStyle" Value="{DynamicResource GridViewHeaderRowStyle1}"/>
        <Setter Property="AlternateRowStyle" Value="{DynamicResource AlternateRowStyle}"/>
        <Setter Property="IsFilteringAllowed" Value="false"/>
        <Setter Property="RowStyle" Value="{DynamicResource GridViewRowStyle}"/>
        <Setter Property="GridLinesVisibility" Value="Both"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="VerticalGridLinesBrush" Value="#CCCCCC"/>
        <Setter Property="HorizontalGridLinesBrush" Value="#CCCCCC"/>
        <!--Setter Property="MinColumnWidth" Value="20"/>
        <Setter Property="MaxColumnWidth" Value="150"/>
        <Setter Property="ColumnWidth" Value="100"/-->
        <Setter Property="RowIndicatorVisibility" Value="Collapsed"/>
        <!--Setter Property="RowDetailsVisibilityMode" Value="VisibleWhenSelected"/-->
        <Setter Property="AlternationCount" Value="2"/>
        <Setter Property="VerticalAlignment" Value="Top"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="ShowGroupPanel" Value="False"/>
        <Setter Property="AutoGenerateColumns" Value="False"/>
        <Setter Property="IsReadOnly" Value="True"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="IsScrolling" Value="True"/>

    </Style>

Then in the main XAML i am using the following code :

<telerik:RadGridView  x:Name="billDataGrid"
            Grid.Row="5" >

            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn Header="Name" Width="*" TextWrapping="Wrap"/>
                <telerik:GridViewDataColumn Header="Address" Width="*" TextWrapping="Wrap" />
                       </telerik:RadGridView>

But when i am running my screen then I am not able to see the scroll bar even the data is very large.

Kindly let me know where i am wrong in defining the scroll bar.

[Maya]

Hi Parul,

Basically, the RadGridView will display a scroll bar in case the rows or columns are more than the available space. However, in case you define it in a control - like StackPanel for example - the scroll bar will not be available. 
 

Best wishes,
Maya
the Telerik team

[Parul]

Hi Maya,

Thanks for quick response !!!!!!!

But kindly let me know the correct way to get the scroll bar.I am not clear with your answer.
So you mean to say that I should not give style to the grid as follows ?

<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>

<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>

<Setter Property="IsScrolling" Value="True"/>  

And what should be the Width i should give to the columns of the grid ?

[Maya]

Hello Parul,

There is no need of the style in case you use it only in the attempt to visualize the scroll bar. Do you define the RadGridView in a particular control - for example:

<StackPanel>
 <telerik:RadGridView Name="playersGrid"

    ItemsSource="{Binding Players}"

     AutoGenerateColumns="False">        
 </telerik:RadGridView>
</StackPanel>

May you share of your code illustrating how you define the grid ?

 

Greetings,
Maya
the Telerik team

[Parul]

Hi Maya ,

I have defined my grid into a Grid row directly and not using the Stackpanel for it.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Classic"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:Telerik_Windows_Controls_MaskedTextBox="clr-namespace:Telerik.Windows.Controls.MaskedTextBox;assembly=Telerik.Windows.Controls.Input"
    xmlns:Telerik_Windows_Controls_Data_DataPager="clr-namespace:Telerik.Windows.Controls.Data.DataPager;assembly=Telerik.Windows.Controls.Data"
    x:Class="RTPOStyles.MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="640" Height="640">





    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="100"/>
            <RowDefinition Height="50"/>
            <RowDefinition Height="70"/>
            <RowDefinition Height="70"/>
            <RowDefinition Height="70"/>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>

        <RadioButton Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center" Content="Radio Button" />
        <StackPanel Grid.Row="1" Orientation="Horizontal" Margin="10,10,10,10">

            <TabControl Grid.Row="1"  HorizontalAlignment="Left">
                <TabItem Header="Tab One" Style="{StaticResource TabItemStyle}" />
                <TabItem Header="Tab Two" Style="{StaticResource TabItemStyle}" />
                <TabItem Header="Tab Three" Style="{StaticResource TabItemStyle}" />

            </TabControl>

            <CheckBox VerticalAlignment="Center" Margin="20" Content="Check Box" />

            <TextBox Style="{StaticResource SearchTextBox}" />

        </StackPanel>



        <ComboBox Width="75" Height="28" Style="{StaticResource ComboBox}" Grid.Row="2" Margin="0" FontFamily="Verdana" FontSize="10.667">
            <ComboBoxItem IsSelected="True" Content="Item 1"/>
            <ComboBoxItem Content="Item 2"/>
            <ComboBoxItem Content="Item 3"/>
            <ComboBoxItem Content="Item 4"/>
            <ComboBoxItem Content="Item 5"/>
        </ComboBox>

        <StackPanel Grid.Row="3" Margin="10" Orientation="Horizontal" HorizontalAlignment="Center">
            <Button  Style="{StaticResource GreenButtonStyle}" Width="100" Height="28" Content="Primary Button" FontSize="12"/>
            <Button  Style="{StaticResource GreyButtonStyle}" Width="120" Height="28" Content="Secondary Button" FontSize="12"/>
            <StackPanel Orientation="Horizontal" />
        </StackPanel>

        <StackPanel Grid.Row="4" Orientation="Horizontal" HorizontalAlignment="Center">
            <TextBox Style="{StaticResource SmallTextBox}" Text="Small Text Box"/>
            <TextBox Style="{StaticResource MediumTextBox}" Text="Medium Text Box"/>
            <TextBox Style="{StaticResource LargeTextBox}" Text="Large Text Box"/>
            <Label Content="Masked Text Box:-"/>
            <telerik:RadMaskedTextBox Style="{StaticResource RadMaskedTextBox}" VerticalAlignment="Center"/>
        </StackPanel>


        <telerik:RadGridView  x:Name="billDataGrid"
            Grid.Row="5"  IsScrolling="True">

            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn Header="Ship To Bill To ID" Width="Auto" TextWrapping="Wrap"/>
                <telerik:GridViewDataColumn Header="Ship To ID" Width="Auto" TextWrapping="Wrap" />
                <telerik:GridViewDataColumn Header="Bill TO ID" Width="Auto" TextWrapping="Wrap"/>
                <telerik:GridViewDataColumn Header="Bill To Name" Width="Auto" TextWrapping="Wrap"/>
                <telerik:GridViewDataColumn Header="Bill To Address1" Width="Auto" TextWrapping="Wrap"/>
                <telerik:GridViewDataColumn Header="Bill To Address2" Width="Auto" TextWrapping="Wrap"/>
                <telerik:GridViewDataColumn Header="Bill To Address3" Width="Auto" TextWrapping="Wrap"/>
                <telerik:GridViewDataColumn Header="Bill To Address4" Width="Auto" TextWrapping="Wrap"/>
                <telerik:GridViewDataColumn Header="Bill To Address5" Width="Auto" TextWrapping="Wrap"/>
                <telerik:GridViewDataColumn Header="Bill To Address6" Width="Auto" TextWrapping="Wrap"/>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>

        <telerik:RadDataPager Grid.Row="6" Style="{DynamicResource RadDataPagerStyle}" />

    </Grid>
</Window>

Kindly let me know why it is not displaying the scroll bar though i have defined style for it and also have large data into it.

[Daniel]

I am having the same problem with a RadGridView that shows hundreds of Rows neither the horizontal or vertical scroll are working.

[Maya]

Hi,

Based on the code-provided by Parul, I have prepared a sample project so that to test the case. However, everything works as expected - the horizontal scroll bar is displayed accordingly. When I added an ItemsSource for the grid, the vertical scroll bar is also visualized. 
May you take a look at the sample attached and verify whether there are any misunderstandings or there is something I am missing according to both of your scenarios ? 

All the best,
Maya
the Telerik team

[Parul]

Hi Maya,

Thanks alot for the solution !!!!!!!!

May be I have applied some wrong style to the grid because of which it was not giving me the aprropriate answer.

[Alena]

Hi Maya,
I have the same problem with scroll bar in grid. Your sample project works fine, but when I put radgrid in radexpander scroll bars do not appear. What should I do?

[Maya]

Hello Alena,

There have been an issue with the RadExpander and the way it measures its size. However, it has already been fixed and will be available with the release of our Service Pack. 
Furthermore, I have tested the case with a RadGridView defined in a RadExpander and everything works as expected with our latest binaries that, as mentioned above, will be available with the Q1 2011 SP.
 

Best wishes,
Maya
the Telerik team

[Avi]

hi guys i am a b.tech. student learning wpf with net can you tell me how can i use the scroll bar in wpf master page contentplaceholder

[Ras Ran]

How to change  vertical and horizontal  Scroll Bar Width  in RadGridView  ?

[Dilyan Traykov]

Hello raneesras,

Please have a look at the following article which explains how to modify the appearance of the scrollbars if you have not done so already.

Do let me know if you require any assistance with the concrete implementation. If that is the case, please specify the theme(s) you're using and I'd be happy to help you out further.

Regards,
Dilyan Traykov
Progress Telerik

[Ras Ran]

hello i have done thid

<telerik:RadGridView.Resources>
      <Style TargetType="ScrollBar">
       <Style.Triggers>
       <Trigger Property="Orientation" Value="Vertical">
       <Setter Property="Width" Value="20"/>
       </Trigger>
       <Trigger Property="Orientation" Value="horizontal ">
        <Setter Property="Height" Value="20"/>
       </Trigger>
        </Style.Triggers>
        </Style>
 </telerik:RadGridView.Resources>

[Dilyan Traykov]

Hello raneesras,

Thank you for sharing your approach with the community.

Could you please confirm whether this provided the desired result or if you require any further assistance?

Regards,
Dilyan Traykov
Progress Telerik