Column Width

[Don]

How do I tell a coulumn to fill the available width of the grid? I have tried auto, *, 1* everything I can think of but the column with does not take up all of the available width. Thanks.

Don

[Tim]

In Q2_2009, you could say ColumnsWidthMode="Fill" and then each column could be a %, like .5*, .25*, .25* = 1.00* - meaning fill the full width, 50% for column 0, and 25% each for columns 1 and 2:

<Style x:Key="RadGridViewDefaultStyle" TargetType="TelerikGridView:RadGridView">
  <Setter Property="ColumnsWidthMode" Value="Fill"/>
  <Setter Property="VerticalAlignment" Value="Top"/>
</Style>

<TelerikGridView:GridViewDataColumn
  Header="Name" SortingState="Ascending"
  UniqueName="Name" Width=".35*" IsReadOnly="True"/>

This doesn't work any more in Q3_2009 - after we upgraded to SL3 to get the fill mode bug fixed in the first place!  Now what?  ColumnsWidthMode is marked obsolete - what's the right property combination(s) to make this work like it did with Q2_2009 + SL3?

Thanks,
Tim

[Lee]

I am also very interested in the solution to this issue.

Thanks!

[stavros sotirchos]

It seems there is a bug in the implementation because when I try and set the width of the Radgridview it seems to work by just entering a width="*" in the column we want to fill the gap. If the width of the radgridview is not defined then nothing is working.

[Hristo]

Hi Stavros,

The new property that replace ColumWidthMode is ColumnWidth. It can be set to Auto(default), Star, SizeToHeader, SizeToCells or 100 (pixels).
This property will set Width to autogenerated columns once (when they are generated). Changes made to this property after autogenerated columns are created won't affect columns.
Also you could set width property on the column itself. It is of the same type so it supports all the same values as ColumnWidth (on RadGridView).
Note that if there is * column in the grid then column virtualization will be off.
Also for * columns to work correctly you should not place RadGridView in panels/controls that will measure its children with infinity. Such panels are StackPanel, Grid panel with Column Width=Auto or Row with Height=Auto. Also ScrollViewer will measure its content with infinity.

Let me know if this information is useful for you. If you have further questions or your scenario is more specific, please open a support thread with attached sample project so we can test it locally and help you further.

All the best,
Hristo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[stavros sotirchos]

To put it simply, can you give as a small example of how you could define a radgridview in Q3 with the old 'Fill' logic without knowing the exact width of the grid.

[Tim]

Here is a narrowed-down example

The main summary page - two expanders, each with a grid

<Telerik:RadPage ... Height="Auto" Width="Auto">
    <ScrollViewer Style="{StaticResource PageLevelScrollViewer}">
        <Grid ...>
            <Grid.Resources>
                ...
            </Grid.Resources>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Row="0" Grid.ColumnSpan="2" .../>
            <Telerik:RadExpander IsExpanded="True" Style="{StaticResource ContentExpander}" Grid.Row="1" Grid.Column="0" ...>
                <Grid ...>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="100"/>
                    </Grid.ColumnDefinitions>
                    <TelerikGridView:RadGridView Grid.Row="0" Grid.Column="0" IsReadOnly="True"
                        Style="{StaticResource RadGridViewDefaultStyle}" AutoGenerateColumns="False" >
                        <TelerikGridView:RadGridView.SortDescriptors>
                            <TelerikData:SortDescriptor Member="Name" SortDirection="Ascending"/>
                        </TelerikGridView:RadGridView.SortDescriptors>
                        <TelerikGridView:RadGridView.Columns>
                            <TelerikGridView:GridViewDataColumn
                                Header="Guid"
                                UniqueName="Id" IsReadOnly="True" IsVisible="False"/>
                            <TelerikGridView:GridViewDataColumn
                                Header="Name" SortingState="Ascending"
                                UniqueName="Name" Width=".35*" IsReadOnly="True"/>
                            <TelerikGridView:GridViewDataColumn
                                Header="..." UniqueName="..."
                                Width=".1*" IsReadOnly="True">
                            </TelerikGridView:GridViewDataColumn>
                            <TelerikGridView:GridViewDataColumn
                                Header="..." UniqueName="..." Width=".15*" IsReadOnly="True"/>
                            <TelerikGridView:GridViewDataColumn
                                Header="..."
                                DataMemberBinding="..."
                                Width=".2*" IsReadOnly="True"/>
                            <TelerikGridView:GridViewDataColumn
                                Header="..."
                                DataMemberBinding="..."
                                Width=".2*" IsReadOnly="True"/>
                        </TelerikGridView:RadGridView.Columns>
                    </TelerikGridView:RadGridView>

                    <Border Grid.Row="0" Grid.Column="1" Style="{StaticResource ActionPanelStyle}">
                        <StackPanel Orientation="Vertical">
                            ...
                        </StackPanel>
                    </Border>
                </Grid>
            </Telerik:RadExpander>

            <Telerik:RadExpander Grid.Row="2" Grid.Column="0" x:Name="Events"
                                  IsExpanded="True" Style="{StaticResource ContentExpander}"
                                  Header="...">
                <Client:EventViewer x:Name="EventViewer"/>
            </Telerik:RadExpander>
        </Grid>
    </ScrollViewer>
</Telerik:RadPage>

Here is the EventViewer XAML:

<UserControl x:Class="EventViewer">
    <Grid x:Name="EventViewerLayoutRoot">
        <Grid.Resources>
            ...
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TelerikRadGridView:RadGridView
                        ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                        x:Name="EventViewerGridView" Grid.Row="0" IsReadOnly="True"
                        ItemsSource="{Binding Path=ObservableEvents, Mode=OneWay}"
                        Style="{StaticResource EventViewerGridStyle}" AutoGenerateColumns="False" >
            <TelerikRadGridView:RadGridView.SortDescriptors>
                <Data:SortDescriptor Member="Timestamp" SortDirection="Descending"/>
            </TelerikRadGridView:RadGridView.SortDescriptors>
            <TelerikRadGridView:RadGridView.Columns>
                <TelerikRadGridView:GridViewDataColumn Header="Identifier" UniqueName="EventId" IsReadOnly="True" IsVisible="False"/>
                <TelerikRadGridView:GridViewDataColumn Header="Severity" UniqueName="Severity" Width=".15*">
                    <TelerikRadGridView:GridViewDataColumn.CellStyle>
                        <Style TargetType="GridView:GridViewCell">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="GridView:GridViewCell">
                                    ...
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </TelerikRadGridView:GridViewDataColumn.CellStyle>
                </TelerikRadGridView:GridViewDataColumn>
                <TelerikRadGridView:GridViewDataColumn Header="Message" UniqueName="Message" Width=".65*">
                    <TelerikRadGridView:GridViewDataColumn.CellStyle>
                        <Style TargetType="GridView:GridViewCell">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="GridView:GridViewCell">
                                    ...
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </TelerikRadGridView:GridViewDataColumn.CellStyle>
                </TelerikRadGridView:GridViewDataColumn>
                <TelerikRadGridView:GridViewDataColumn Header="Timestamp" UniqueName="Timestamp" DataMemberBinding="{Binding Path=Timestamp, Converter={StaticResource DateFormatter}}" Width=".2*"/>
            </TelerikRadGridView:RadGridView.Columns>
        </TelerikRadGridView:RadGridView>
    </Grid>
</UserControl>

Here are the static resources.  I changed ColumnsWidthMode=Fill to ColumnWidth=*

        <Style x:Key="RadGridViewDefaultStyle" TargetType="TelerikGridView:RadGridView">
            <Setter Property="ColumnWidth" Value="*"/>
            <Setter Property="VerticalAlignment" Value="Top"/>
        </Style>

        <Style x:Key="EventViewerGridStyle" TargetType="TelerikGridView:RadGridView">
            <Setter Property="ColumnWidth" Value="*"/>
            <Setter Property="MaxHeight" Value="344"/>
            <Setter Property="ScrollMode" Value="RealTime"/>
        </Style>

I've attached three screen shots.  telerik q2 - summary is the default summary view using the Q2_2009 release + SL3, note that the columns are filled to 100% of the grid.  q3a - same screen.  The event detail is initially sized right, while the summary view at the top is all scrunched up.  After resizing the browser window a few times, the top grid gets a bit wider, but still not 100% and the bottom grid (event grid) has extra empty column space at the right.

This all worked flawlessly with Q2, SL3, and ColumnWidthMode=Fill.  Unless I can figure out how to get back that behavior we can't move forward.  I was counting on the Q3 release because it does (in fact!) fix a bug with vertical scrolling and the MaxHeight property which I REALLY REALLY want.

Tim

[Hristo]

Hello Tim,

The xaml you placed is invalid. It contains ... so there is no way of knowing what was in there.
Could you open support ticket and attach sample project demonstrating the problem so that we can investigate it further?

Regards,
Hristo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Tim]

I elided uninteresting or proprietary properties, names and content.  All of the layout elements are present in the xaml.  I can't just post the real xaml, and I was hoping the layout elements would give someone a clue so I don't have to whittle my production app down.

This worked perfectly with SL3 + Q2_2009_812.  In my opionion, Q3_2009 has regressed severely enough that I can't use it.

Tim

[Hristo]

Hi Tim,

I'm sorry but without correct xaml I'm not sure that I can give you correct advise.
One thing that I see in your xaml is the ScrollViewer. ScrollViewer measure its content with infinity. This will cause RadGridView to stop virtualization for rows and cells and probably can cause issues with star columns. Other panels that measure its children with infinity are StackPanel and Grid panel with Auto column/row.
You have several options: Set explicit Width/Height on RadGridView - this will allow the grid to virtualize its children or place RadGridView in a container that will not measure it with infinity.

Here are some modifications that I've made to the xaml you posted.
The grid columns work as expected:

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Row="0" Grid.ColumnSpan="2" Text="Some Text"/>
        <Telerik:RadExpander IsExpanded="True" Grid.Row="0" Grid.Column="0">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="100"/>
                </Grid.ColumnDefinitions>
                <TelerikGridView:RadGridView x:Name="grid" IsReadOnly="True" AutoGenerateColumns="False">
                    <TelerikGridView:RadGridView.SortDescriptors>
                        <TelerikData:SortDescriptor Member="One" SortDirection="Ascending"/>
                    </TelerikGridView:RadGridView.SortDescriptors>

                    <TelerikGridView:RadGridView.Columns>

                        <TelerikGridView:GridViewDataColumn
                                Header="One" DataMemberBinding="{Binding One}"
                                IsReadOnly="True" IsVisible="True"/>

                        <TelerikGridView:GridViewDataColumn
                                DataMemberBinding="{Binding Two}"
                                Header="Two" SortingState="Descending"
                                Width=".35*" IsReadOnly="True"/>

                        <TelerikGridView:GridViewDataColumn
                                Header="Three" DataMemberBinding="{Binding Three}"
                                Width=".1*" IsReadOnly="True" />

                        <TelerikGridView:GridViewDataColumn
                                Header="Four" DataMemberBinding="{Binding Four}"
                                Width=".15*" IsReadOnly="True" />

                        <!--<TelerikGridView:GridViewDataColumn
                                Header="..."
                                DataMemberBinding="..."
                                Width=".2*" IsReadOnly="True" />

                            <TelerikGridView:GridViewDataColumn
                                Header="..."
                                Width=".2*" IsReadOnly="True"/>-->

                    </TelerikGridView:RadGridView.Columns>
                </TelerikGridView:RadGridView>

                <Border Grid.Row="0" Grid.Column="1" >
                    <StackPanel Orientation="Vertical">
                        <Button Content="Some button" />
                    </StackPanel>
                </Border>
            </Grid>
        </Telerik:RadExpander>

        <Telerik:RadExpander Grid.Row="2" Grid.Column="0" x:Name="Events"
                                  IsExpanded="True"
                                  Header="Next Grid">
            <!--<Client:EventViewer x:Name="EventViewer"/>-->
            <TextBlock Text="Other Controls here" />
        </Telerik:RadExpander>
    </Grid>

Let us know if we can help you further.

P.S. I fully understand your concerns about posting a proprietary information on a public forum, but the support tickets are strictly confidential and can be reviewed only by you and us. We do not have a practice to make public any of the support tickets.

Kind regards,
Hristo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Tim]

I find fixed-sizes underwhelming.  If I buy a big monitor, I want to use that big monitor, and I want to have things flow to fit.

Without the outer-most scrollviewer, content large than the browser window is tall simply disappears.  That is likewise underwhelming. 

Coming from a Java/Swing background, and HTML/Ajax thereafter, I am unimpressed with Silverlight's layout capabilities.  Either they are really bad, or they are unintuitive.

One fact remains - what used to work with SL3, Q2_2009 does not work any longer with SL3, Q3_2009.

Can you see, from my screen shots, the difference in resize behavior?  Is there an explanation for that?

I'll look over your suggestions shortly, and maybe I can produce a smaller example.  You could not possibly deploy this project even if I uploaded all the sources...

Tim

[Tim]

I have managed to build a non-proprietary shell of our application.  I will upload it as a support ticket to demonstrate the problem.

Tim

[Hristo]

Hello Tim,

With Q3 we have made a lot modifications in order to introduce horizontal and vertical virtualization. The main problem is that when some control measures the grid with infinite size we cannot virtualize it. This affects the * columns - we cannot distribute infinite space.
My advice was to remove the ScrollViewer because RadGridView have GridViewScrollViewer that will allow you to scroll if there is not enough place.
Silverlight layout capabilities are not limiting in my opinion. You can still achieve the stretch effect, no need to use fixed size. Just place the grid in ColumnDefinition or RowDefinition with Width/Height = "*".  This way, the grid will be measured with a certain size and if there is not enough space the internal scrollviewer will be used. You can read more about SL layout system from here:
http://msdn.microsoft.com/en-us/library/cc645025(VS.95).aspx

If you could extract a small part of you project (no need for real data just valid xaml with some fake data) we could try to create the layout that you need.

Greetings,
Hristo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Tim]

Hristo,

I spent a long time yesterday experimenting with this, reading your posts here in excruciating detail, and producing an example (which I put in a support ticket) which I believe obeys all your recommendations... i.e., there is no auto column, and yet the grid is still not right.

I am impressed with the speed of virtualized rows and plan to spend a 12-16 hour day this week converting my entire application - BUT - I need to get the usercontrol mentioned in the support ticket working first. 

Ticket # 258880

Tim

[Tim]

Build Q3_2009_3_1116 shows great early promise... if you are waiting on this fix, check it out.

Tim

[Tim]

I am satisfied that the problem is fixed in the 2009_3_1116 build.

Thanks,
Tim

[Deepak Subhedar]

Hi ,

I am trying to generate Grid dynamically and having issues setting up the column width

My code is as follows for adding new column.

 

internal static void AddColumn(Telerik.Windows.Controls.RadGridView grid,

 

 

string headerText, string fieldName, System.Windows.Data.IValueConverter c, TextAlignment txtAlign,Double colWidth, String sortMemberPath)

 

{

 

Binding b = new System.Windows.Data.Binding(fieldName);

 

 

if (c != null) b.Converter = c;

 

grid.Columns.Add(

new GridViewDataColumn() { Header = headerText, DataMemberBinding = b

 

, UniqueName = fieldName , TextAlignment = txtAlign, Width =

new GridViewLength(colWidth), SortMemberPath = sortMemberPath

 

});

 

}


By using above code the on clicking the ScrollViewer the browser crashes. If I remove (Width = new GridViewLength(colWidth)) there is no issue.
Any help is appreciated.

Deepak

[Vlad]

Hello Deepak,

What is the value of colWidth? Can you send us an example where we can debug this?

Regards,
Vlad
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Lee]

Hello,

I have been following this thread as I have an extremely similar need to the need that Tim posted about:

"In Q2_2009, you could say ColumnsWidthMode="Fill" and then each column could be a %, like .5*, .25*, .25* = 1.00* - meaning fill the full width, 50% for column 0, and 25% each for columns 1 and 2:"

This was said to have been fixed in the 2009_3_1116 build....


A) How would I achieve the above in this new version? (The same way that is mentioned above, or a different way?)


Thanks!

- Lee

[Tim]

Lee,

I left my individual column widths as they were (.25*, .25*, .50*) and changed ColumnsWidthMode=Fill to ColumnWidth=*

Tim

App.xaml fragment:

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:Controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
             xmlns:Controls1="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
             x:Class="SilverlightApplication9.App">
    <Application.Resources>
        <Style x:Key="RadGridViewDefaultStyle" TargetType="Controls1:RadGridView">
            <Setter Property="ColumnWidth" Value="*"/>
            <Setter Property="VerticalAlignment" Value="Top"/>
            <Setter Property="MaxHeight" Value="344"/>
        </Style>
    </Application.Resources>
</Application>

MainPage.xaml:

                    <Controls1:RadGridView Grid.Row="0" Grid.Column="0" x:Name="ExampleGridView"
                                           Style="{StaticResource RadGridViewDefaultStyle}" AutoGenerateColumns="False" IsReadOnly="True" >
                        <Controls1:RadGridView.Columns>
                            <Controls1:GridViewDataColumn Header="Identifier" UniqueName="Id" IsReadOnly="True" IsVisible="False"/>
                            <Controls1:GridViewDataColumn Header="Name" UniqueName="Name" SortingState="Ascending"  Width=".35*"/>
                            <Controls1:GridViewDataColumn Header="OtherName" UniqueName="OtherName" Width=".35*"/>
                            <Controls1:GridViewDataColumn Header="Size1"  UniqueName="Size1" Width=".10*"/>
                            <Controls1:GridViewDataColumn Header="Size2"  UniqueName="Size2" Width=".10*"/>
                            <Controls1:GridViewDataColumn Header="Online" UniqueName="Online" Width=".10*" IsReadOnly="True"/>
                        </Controls1:RadGridView.Columns>
                    </Controls1:RadGridView>