[Solved] GridView not respecting Height="Auto" property

[Michael Bartlett]

I am embedding a Silverlight control in a SharePoint web part, and the layout container that the GridView is contained within has Height="Auto", the grid is not sizing to the full height of its contents. Can anyone suggest what I might be doing wrong here?

Here is the XAML code for the user control:

<UserControl.Resources>
        <Style x:Key="LabelText" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Verdana" />
            <Setter Property="FontSize" Value="12" />
            <Setter Property="Foreground" Value="#333333" />
            <Setter Property="TextWrapping"  Value="Wrap" />
        </Style>
        <Style x:Key="HeaderText" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Verdana" />
            <Setter Property="FontSize" Value="13" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="TextWrapping"  Value="Wrap" />
            <Setter Property="FontWeight"  Value="Bold" />
        </Style>
        <Style x:Key="LinkText" TargetType="HyperlinkButton">
            <Setter Property="FontFamily" Value="Verdana" />
            <Setter Property="FontSize" Value="12" />
            <Setter Property="Foreground" Value="#7d2613" />
        </Style>
        <SolidColorBrush x:Key="PanelHeaderInnerBorder" Color="#FFA4624F" />
        <LinearGradientBrush x:Key="PanelHeaderBackground" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFAB6752" />
            <GradientStop Color="#FF6F1807" Offset="1"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="PanelHeaderOuterBorder" Color="#FF561707" />
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Width="Auto" Height="Auto">
        <Grid.Resources>
            <local:MailToLinkConverter x:Key="EmailLinkConverter"></local:MailToLinkConverter>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Border BorderBrush="{StaticResource PanelHeaderOuterBorder}" Grid.Row="0" CornerRadius="4,4,0,0" Background="{StaticResource PanelHeaderBackground}">
            <Border BorderBrush="{StaticResource PanelHeaderInnerBorder}"
                    Padding="5,3" CornerRadius="4,4,0,0">
                <TextBlock x:Name="ListHeader" Style="{StaticResource HeaderText}" Text="Team Members"></TextBlock>
            </Border>
        </Border>
        <telerik:RadDataPager telerikControls:StyleManager.Theme="Summer"
            Grid.Row="1"
            x:Name="ResultsPager"
            PageSize="10"
            Source="{Binding Items, ElementName=ResultsGrid}"
            DisplayMode="PreviousNextNumeric"
            AutoEllipsisMode="Both"
            NumericButtonCount="5"
            IsTotalItemCountFixed="True" Visibility="Collapsed" />
        <telerik:RadGridView telerikControls:StyleManager.Theme="Summer"
                             RowIndicatorVisibility="Collapsed"
                             HorizontalAlignment="Stretch"  Name="ResultsGrid"
                             VerticalAlignment="Stretch"  CanUserDeleteRows="False"
                             CanUserFreezeColumns="False" CanUserInsertRows="False"
                             CanUserReorderColumns="False" CanUserResizeColumns="False"
                             EditTriggers="None" GridLinesVisibility="None"
                             IsFilteringAllowed="False" ShowGroupPanel="False"
                             Grid.Row="2" AutoGenerateColumns="False" ShowColumnHeaders="False"
                             CanUserSelect="False" RowStyle="{StaticResource GridViewRowStyle}"
                             Width="Auto" Height="Auto">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn UniqueName="EmployeeDetails" Header="Details" DataMemberBinding="{Binding Name}" Width="*" Background="White">
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition MinHeight="70"></RowDefinition>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="56"></ColumnDefinition>
                                    <ColumnDefinition Width="*"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <StackPanel Orientation="Vertical" Grid.Column="0">
                                    <Border BorderBrush="#666666" BorderThickness="1" Padding="1">
                                        <HyperlinkButton x:Name="ProfileLink" NavigateUri="{Binding ProfileUrl}" TargetName="_blank" ToolTipService.ToolTip="Browse to profile page">
                                            <HyperlinkButton.Content>
                                                <Image Stretch="Uniform" Width="52" Height="52" Source="{Binding PictureUrl}" />
                                            </HyperlinkButton.Content>
                                        </HyperlinkButton>
                                    </Border>
                                    <HyperlinkButton x:Name="DetailsLink" Style="{StaticResource LinkText}" Content="Details" Click="DetailsLink_Click" Visibility="Collapsed"></HyperlinkButton>
                                </StackPanel>
                                <StackPanel Orientation="Vertical" Grid.Column="1" Margin="4,6">
                                    <TextBlock FontWeight="Bold" Style="{StaticResource LabelText}" Text="{Binding Name}" />
                                    <TextBlock Style="{StaticResource LabelText}" Text="{Binding JobTitle}" />
                                    <HyperlinkButton x:Name="EmailLink" Style="{StaticResource LinkText}" FontSize="11" Content="{Binding Email}" NavigateUri="{Binding Email, Converter={StaticResource EmailLinkConverter}}" TargetName="_blank"></HyperlinkButton>
                                </StackPanel>
                            </Grid>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                </telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>

Of course, if I give the plugin a fixed height, the control displays with that height. However, what I want is for the silverlight control to stretch to the full height of its contents. For example, if each grid row has a height of 25px and I databind 10 items, the grid's layout container should stretch to accomodate the full height of the grid (250px + header/footer, etc). If I pass in 100% for the plugin height, the control won't display at all. Any ideas?

Thanks in advance for your help,

Mike

[Kalin Milanov]

Hello Michael Bartlett,

Honestly, I cannot figure out where the problem is. Everything you did is correct. The only thing I can advise you is to check the width and height of the UserControl itself. Other than that the application should work correctly. Attached I am also sending you the sample I was using to test your issue. Maybe you can find something I am missing in it.

Best wishes,
Kalin Milanov
the Telerik team

[Michael Bartlett]

You are correct, this sample behaves as expected. I should have mentioned that I am hosting this control in a MOSS 2007 web part. I should have figured that the heinous HTML rendered in SharePoint pages would cause problems. Have you guys run into this problem when integrating your Silverlight controls into a MOSS site?

[Milan]

Hi Michael Bartlett,

I remember another user having a similar problem but so far we haven't been able to find some kind of workaround. Isn't it possible to set the height of the container as "%100" or something like that?

Sincerely yours,
Milan
the Telerik team

[Michael Bartlett]

You've actually hit on the problem exactly. For the Silverlight control to stretch the full height of its contents, you have to set every parent element with height=100%, or one of the parent elements must have a fixed height set. This isn't really satisfying the requirement, however, because then the control might stretch beyond its required size. This dynamic sizing problem seems to be affecting many people. I did some testing and by handling the LayoutUpdated event for the root element, I call a javascript method that resizes the containing div element. I am still new to Silverlight, so perhaps I am not doing this right, but the height for both the DesiredSize and RenderSize is not correct; it has a height with scrollbars visible. To reproduce the issue, take the above sample application that Kalin created and modify the code in the MainPage.xaml.cs file as follows:

public MainPage()
{
    // Required to initialize variables
    InitializeComponent();
    this.LayoutRoot.LayoutUpdated += new  EventHandler(LayoutRoot_LayoutUpdated);
}

void LayoutRoot_LayoutUpdated(object sender, EventArgs e)
{
    ResizeContainer(this.LayoutRoot.RenderSize.Height);
}

private void ResizeContainer(double height)
{
    HtmlPage.Window.Invoke("ResizeContainer", new object[] { height });
}

Next, add the following javascript to the test page:

function ResizeContainer(height) {
    document.getElementById("silverlightControlHost").style.height = height;
}

Not quite what I hoped for, but it's a start. I need for the containing div to be resized so that the silverlight control shows all its contents without scrollbars.

Thanks in advance for your help,

Mike