RadGridView in a ScrollViewer stretches off the screen

Question

I have an app that I am styling and it's default size is 1440x900. I want the user to be able to scroll up and down if the app is resized smaller than that.

I tried wrapping a ScrollView control around the main grid control of the app and it seemed to work. However, the app has many pages and whenever I navigate to one that has a RadGridView control in it, the columns of the RadGridView expand way off the page.

I know this is being caused by the ScrollView control, because it is basically letting the RadGridView to grow as large as it wants.

Is there any way to stop the RadGridView controls from stretching non stop?

score 1 · Answer 1 · answered Apr 18 '12 at 20:57

The Telerik RadGridView control allows for row and column virtualization, where the control will recycle the controls used for each cell of the grid. This cuts down on memory usage of the grid and also makes it perform better with large amounts of data. When virtualization is enabled, and the grid is not large enough to show all of the data it contains, the grid will provide its own scrollbars

In order to enable virtualization, the RadGridView control needs to have bounded width and height. Putting a RadGridView inside a ScrollViewer gives it infinite width and height, which disables the virtualization. My suggestion is to bound the width and height of the grid, using the MaxWidth and MaxHeight properties, and then take the grid out of the ScrollViewer you've wrapped it in. Row and column virtualization are enabled using the EnableRowVirtualization and EnableColumnVirtualization properties of the RadGridView control, but I seem to remember that both of these are True by default.

Disclaimer: I have not used the WPF edition of the Telerik controls, only the Silverlight edition. Both come from the same code-base so their behaviour ought to be similar.

score 0 · Answer 2 · answered Apr 18 '12 at 21:01

By default, the RadGridView control will automatically put in scrollbars for the horizontal and vertical scrolling of it's rows if there is not enough room to display the content. You are right that the ScrollViewer simply lets the RadGridView determine it's own size unconstrained, and therefore it will fill up the width to accomodate all of it's columns, and the height to accomodate all of the rows.

You want the RadGridView to be constrained by it's container, so you'll want to put it into a grid cell (unless it is supposed to take up the entire view). You shouldn't have any Width or Height set on the RadGridView, because you want them set as Auto (the default) to grow or shrink appropriately. It sounds like something else might be getting in the way of that, so I suggest you post some code.

Here is my RadGridView, and it fills up the container and scrolls like you want. Note that I have overridden the row definition and am using a custom usercontrol, which shouldn't affect the scrolling at all.

 <telerik:RadGridView ItemsSource="{Binding Shipments}" RowStyle="{StaticResource rowStyle}" 
                            RowDetailsVisibilityMode="Collapsed"
                            RowIndicatorVisibility="Collapsed"
                            CanUserDeleteRows="False"
                            CanUserInsertRows="False" 
                            CanUserSelect="False" telerik:StyleManager.Theme="Windows7" />

Here is my customized rowtemplate (in my local resourcedictionary):

<ControlTemplate x:Key="MyCustomRowTemplate" TargetType="telerik:GridViewRow">
            <Border x:Name="rowsContainer" BorderBrush="#FFA0AFC3" BorderThickness="0,0,0,1" >
                <Grid Width="Auto" HorizontalAlignment="Stretch">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <view:ActiveReleaseItemView DataContext="{Binding}" />
                </Grid>
            </Border>
</ControlTemplate>
<Style x:Key="rowStyle" TargetType="telerik:GridViewRow">
     <Setter Property="Template" Value="{StaticResource MyCustomRowTemplate}" />
</Style>

RadGridView in a ScrollViewer stretches off the screen

2 Answers2