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

How to use Scroll bar in Grid ?

14 Answers 3100 Views

GridView

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

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="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

Accepted

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

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="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="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.

answered on 18 Apr 2011, 08:25 AM

WpfApplication1.zip

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

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