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

GridView not respecting Height="Auto" property

4 Answers 209 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Michael Bartlett
Top achievements
Rank 1
Michael Bartlett asked on 13 Jul 2010, 12:03 PM
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

4 Answers, 1 is accepted

Sort by
0
Kalin Milanov
Telerik team
answered on 16 Jul 2010, 10:49 AM
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
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
Michael Bartlett
Top achievements
Rank 1
answered on 20 Jul 2010, 12:26 PM
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?
0
Milan
Telerik team
answered on 21 Jul 2010, 06:07 AM
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
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
Michael Bartlett
Top achievements
Rank 1
answered on 21 Jul 2010, 07:57 AM
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
Tags
GridView
Asked by
Michael Bartlett
Top achievements
Rank 1
Answers by
Kalin Milanov
Telerik team
Michael Bartlett
Top achievements
Rank 1
Milan
Telerik team
Share this question
or