This is a migrated thread and some comments may be shown as answers.

How to use Scroll bar in Grid ?

14 Answers 559 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Parul
Top achievements
Rank 1
Parul asked on 13 Apr 2011, 12:32 PM
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.

14 Answers, 1 is accepted

Sort by
0
Accepted
Maya
Telerik team
answered on 13 Apr 2011, 12:45 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Parul
Top achievements
Rank 1
answered on 13 Apr 2011, 01:02 PM
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 ?
0
Maya
Telerik team
answered on 13 Apr 2011, 01:12 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Parul
Top achievements
Rank 1
answered on 13 Apr 2011, 01:17 PM
Hi Maya ,

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

<Window
    xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Classic"
    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.
0
Daniel
Top achievements
Rank 1
answered on 15 Apr 2011, 08:12 PM
I am having the same problem with a RadGridView that shows hundreds of Rows neither the horizontal or vertical scroll are working.
0
Maya
Telerik team
answered on 18 Apr 2011, 08:25 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Parul
Top achievements
Rank 1
answered on 18 Apr 2011, 08:49 AM
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.
0
Alena
Top achievements
Rank 1
answered on 18 Apr 2011, 09:59 AM
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?
0
Maya
Telerik team
answered on 19 Apr 2011, 03:50 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Avi
Top achievements
Rank 1
answered on 28 Aug 2012, 11:52 AM
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
0
Ras Ran
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 11 Jan 2019, 06:37 AM
How to change  vertical and horizontal  Scroll Bar Width  in RadGridView  ?
0
Dilyan Traykov
Telerik team
answered on 15 Jan 2019, 10:14 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ras Ran
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 16 Jan 2019, 06:50 AM
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>
0
Dilyan Traykov
Telerik team
answered on 16 Jan 2019, 03:55 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
GridView
Asked by
Parul
Top achievements
Rank 1
Answers by
Maya
Telerik team
Parul
Top achievements
Rank 1
Daniel
Top achievements
Rank 1
Alena
Top achievements
Rank 1
Avi
Top achievements
Rank 1
Ras Ran
Top achievements
Rank 2
Iron
Veteran
Iron
Dilyan Traykov
Telerik team
Share this question
or