Resizing the GridView control

[Marcelo]

How can I make the GridView resize itself when the window is being resized. I have the GridView inside a Header Content control. The Header Content control resize itself horizontally but not vertically.

The GridView inside the Header Content control, does not resize.

I have tried setting the Height and Width to Auto, but there is no difference.

Any ideas?

[Pavel Pavlov]

Hello Marcelo,

How about horizontal alignment = stretch ?

Greetings,
Pavel Pavlov
the Telerik team

[Marcelo]

Thank you for the quick response. Tried it and it makes no difference. The GridView seems to have a fixed width.

<telerikQuickStart:HeaderedContentControl Grid.Column="1" Header="Details" Margin="4,0,0,0" Template="{StaticResource ResourceKey=DetailsHeaderControl}">
<Grid x:Name="LayoutRoot" Background="White">

<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>

<telerik:RadGridView HorizontalAlignment="Stretch" Name="grv" VerticalAlignment="Top" AutoGenerateColumns="False"
ActionOnLostFocus="None" CanUserFreezeColumns="False" SelectionUnit="FullRow" SelectionMode="Single" IsSynchronizedWithCurrentItem="False"
CanUserDeleteRows="False" IsReadOnly="True" CanUserSelect="True" CanUserInsertRows="False"
ItemsSource="{Binding dataSrc}" ShowGroupPanel="False" ScrollViewer.HorizontalScrollBarVisibility="Visible"
>

[Pavel Pavlov]

Hello Marcello,

I believe the telerik:HeaderedContentControl is to blame in this case. This is just a part of our demo application and  is not intended to be used as a separate component.
I strongly believe removing it from your project should fix the problem . Let me know in case this does not solve the issue.

All the best,
Pavel Pavlov
the Telerik team

[Marcelo]

Yes, removing the HeaderContent Control fixed the "horizontal" problem. Still can't make it resize vertically, even if I use VerticalAlignment = "Stretch". In fact, if I use VerticalAlignment="Stretch" it just grows bigger than the window's size. I don't see Scroll Bars even though I have them set

ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible"

Also, hate to lose the HeaderContent. Any other "design" ideas on what I can do to replace it? Fancy rectangle, may be...

[Pavel Pavlov]

Hello Marcelo,

As any other WPF control RadGridView will be arranged on the screen depending on what container it has been put in . By the pieces of the puzzle I have so far, I may guess now it is in a stack panel or a ScrollViewer ?

Please share the final goal you are trying to achieve ( e.g. header , content , resizing behavior ) may be with some graphical example. Having this i can give more specific guidelines.

All the best,
Pavel Pavlov
the Telerik team

[Marcelo]

Thank you Pavel.

I have a Page control (Master Page) that has a header and a footer. And the several User Controls that I load on demand. One of the UC has this GridView.

After removing the Header Content Control, the GridView resizes horizontally just fine, but vertically it just goes beyond the limit of the window. I did try just the GridView, the I moved the GridView to a Grid control and then to a StackPanel control and I can't "fix" the vertical alignment.

BTW, I did replace the Header Content Ctrl with a Border Ctrl.

<StackPanel Grid.Column="1" VerticalAlignment="Stretch" Margin="0,0,0,70">
    <Border CornerRadius="4,4,0,0" Height="35" Margin="4,0,0,0">
        <Border.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFD8D8D8" Offset="0"/>
                <GradientStop Color="#FFAEAEAE" Offset="1"/>
            </LinearGradientBrush>
        </Border.Background>
        <Button Margin="0,0,5,0" x:Name="Save"  IsEnabled="True" VerticalAlignment="Center" HorizontalAlignment="Right" >
            <Image x:Name="imgSLRALock" Source="../../Resources/Icons/Save.png" Width="22" Height="22" ToolTip="Save LRA lock" />
        </Button>
    </Border>
    <telerik:RadGridView Name="grv"
                                ItemsSource="{Binding src}" SelectedItem="{Binding Path=CurrentItem, Mode=TwoWay}"
                                AutoGenerateColumns="False"
                                CanUserFreezeColumns="False" SelectionUnit="FullRow" IsSynchronizedWithCurrentItem="True"
                                RowIndicatorVisibility="Collapsed" IsReadOnly="True" ShowGroupPanel="False"
                                ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible"
                                Margin="4,0,0,70">

[Pavel Pavlov]

Hello Marcelo,

Lets elaborate on a small project . Please have a look at the attached one. It has a GridView that resizes correctly with the Window inside.

Greetings,
Pavel Pavlov
the Telerik team

[Marcelo]

What you sent me works, but it is not what we are trying to do. If I add your GridView to a DockPanel I don't get the scroll bars. Can't see the bottom of the grid either. What am I missing here?

<DockPanel LastChildFill="True">

    <Grid DockPanel.Dock="Top" Background="#FF002C54">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="40" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Image Grid.Row="0" Grid.Column="0" Name="img" />
        <Label Grid.Row="0" Grid.Column="1" Content="Header" Foreground="White" FontFamily="Helvetica" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Left">
            <Label.Background>
                <SolidColorBrush/>
            </Label.Background>
        </Label>

    </Grid>

    <Grid DockPanel.Dock="Bottom" Background="#FF002C54">
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Label Grid.Row="0" Grid.Column="0" Content="Footer" Foreground="White" FontFamily="Helvetica" FontSize="12" VerticalAlignment="Center" HorizontalAlignment="Center">
            <Label.Background>
                <SolidColorBrush/>
            </Label.Background>
        </Label>
    </Grid>

    <StackPanel Name="spUserCtrls">
        <telerik:RadGridView Name="grv" Grid.Row="1"
                            CanUserFreezeColumns="False" SelectionUnit="FullRow" IsSynchronizedWithCurrentItem="True"
                            RowIndicatorVisibility="Collapsed" IsReadOnly="True" ShowGroupPanel="False"
                           />
    </StackPanel>

</DockPanel>

[Pavel Pavlov]

Hi Marcelo,

What is the purpose of the stack panel around  RadGridView ? When you place RadGridView in a Stack panel  it will not have scrollbars. The Stack panel is from those  panels which measure their children with Infinity. This means it always gives the children all the space they have requested.

Greetings,
Pavel Pavlov
the Telerik team

[Marcelo]

Well, that was it. In other words, the StackPanel was the one causing the problem. To answer your question, the GridView needs to be contained because I have other items on top of it. I replaced the StackPanel with a Grid and now it works.

Thank you!