Narrow column widths during startup

[James Stewart]

I have a straightforward scenario with a grid where the columns have been given explicit widths in XAML and the ItemsSource is bound to an ObservableCollection of a business object.
The problem is that when you open this view with the grid, you initially see - for a few seconds - that the set of columns are all there ok and have data but are very narrow (about the width of the 'filter funnel' icon) and then they spring out to the expected width. This does not look good!
Any idea what might be causing this or how I can prevent it happening?

Thanks

James S

[Vlad]

Hi James,

Can you send us an example where this can be reproduced? Can you post more info about the grid version?

Regards,
Vlad
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.

[James Stewart]

I am using version 2010 Q1 of GridView. The length of time that the narrow columns are displayed seems to be directly related to the amount of data to be shown. With 0 records, the problem is not visible. With as few as 2 records, you can still see a brief glimpse of the effect; and with only 20 records the narrow-columns effect is very noticeable.

The grid is bound to a collection, and the (NHibernate) query is run within the getter. However, even if I run the query in the view model constructor and only return the field variable in the getter, I still see the problem.

It is a not a simple task to isolate the code to send you a full example, but, for what it is worth, here are the relevant code snippets:

    public LogViewerViewModel()
    {
     .... (set mgr)
      String hql = @"from IncidentLog i order by LoggedOn desc";
      IQuery q = mgr.Session.GetISession().CreateQuery(hql).SetMaxResults(20);
      obscollIncidentLog = new ObservableCollection<IncidentLog>(q.List<IncidentLog>());
    }

    public ObservableCollection<IncidentLog> Logs
    {
      get
      {
        return obscollIncidentLog;
      }
    }

Thanks

James.

[Vlad]

Hi,

Can you post your page/grid XAML?

Sincerely yours,
Vlad
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.

[James Stewart]

Certainly - should have done so in last reply. There is no significant code-behind (other than a row loaded handler, which, if omitted, makes no difference to the problem).

<UserControl x:Class="Kelton.KLog.UI.Controls.LogViewer"
             xmlns:local="clr-namespace:Kelton.KLog.UI.Controls"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:cnv="clr-namespace:Kelton.Common.Converters;assembly=Kelton.Common"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             mc:Ignorable="d"
             Height="300" Width="900"
             d:DesignHeight="300" d:DesignWidth="300">

  <UserControl.Resources>
    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
    <cnv:FormattingConverter x:Key="formatter" />
  </UserControl.Resources>

  <DockPanel LastChildFill="True">
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
      </Grid.RowDefinitions>
      <telerik:RadGridView
               Grid.Row="0"
               x:Name="grdView"
               Width="Auto" Height="Auto"
               ItemsSource="{Binding ItemCollection}"
               SelectedItem="{Binding SelectedItem}"
               ScrollMode="RealTime"
               AutoGenerateColumns="False"
               ShowGroupPanel="True"
               IsFilteringAllowed="True"
               CanUserFreezeColumns="True"
               CanUserReorderColumns="False"
               CanUserSortColumns="True"
               CanUserResizeColumns="True"
               RowIndicatorVisibility="Collapsed"
               RowDetailsVisibilityMode="Collapsed"
               IsReadOnly="True"
        >
        <telerik:RadGridView.RowDetailsTemplate>
          <DataTemplate>
            <Grid Margin="20,0,0,0">
              <Grid.RowDefinitions>
                <RowDefinition Height="20"/>
                <RowDefinition />
              </Grid.RowDefinitions>
              <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
              </Grid.ColumnDefinitions>
              <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
                <TextBlock Text="Details" FontSize="14" FontFamily="Times New Roman" Foreground="{DynamicResource KeltonBlueNormalBrush}"/>
              </StackPanel>
              <TextBlock Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2"
                         Text="{Binding DeletedByDetails}"
                         Foreground="Black" FontWeight="Bold" TextWrapping="Wrap"
                         Visibility="{Binding Path=IsDeleted, Converter={StaticResource BooleanToVisibilityConverter}}"
                         />
              <Grid Grid.Row="1" Grid.Column="0">
                <Grid.RowDefinitions>
                  <RowDefinition/>
                  <RowDefinition/>
                  <RowDefinition/>
                  <RowDefinition/>
                  <RowDefinition/>
                  <RowDefinition/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="70"/>
                  <ColumnDefinition Width="150"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Row="0" Grid.Column="0" Text="Event" Foreground="{DynamicResource KeltonBlueNormalBrush}" />
                <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Incident}" TextWrapping="Wrap" Foreground="Black" />
                <TextBlock Grid.Row="1" Grid.Column="0" Text="Source" Foreground="{DynamicResource KeltonBlueNormalBrush}"/>
                <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Source}"  TextWrapping="Wrap" Foreground="Black"/>
                <TextBlock Grid.Row="2" Grid.Column="0" Text="Severity" Foreground="{DynamicResource KeltonBlueNormalBrush}"/>
                <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Severity}" Foreground="{Binding Severity.Brush}" />
                <TextBlock Grid.Row="3" Grid.Column="0" Text="Occurred" Foreground="{DynamicResource KeltonBlueNormalBrush}"/>
                <TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding OccurredOn}" Foreground="Black" />
                <TextBlock Grid.Row="4" Grid.Column="0" Text="Logged by" Foreground="{DynamicResource KeltonBlueNormalBrush}"/>
                <TextBlock Grid.Row="4" Grid.Column="1" Text="{Binding CreatedBy}" Foreground="Black" />
              </Grid>

              <StackPanel Grid.Row="1"  Grid.Column="1" Orientation="Vertical" Margin="0">
                <TextBlock Text="Parameter(s):" Margin="10,0,0,0" Foreground="{DynamicResource KeltonBlueNormalBrush}"/>
                <telerik:RadGridView
                         x:Name="grdView"
                         Width="Auto" Height="Auto" Margin="10,0,0,10"
                         ItemsSource="{Binding IncidentLogParameters}"
                         ScrollMode="RealTime"
                         AutoGenerateColumns="False"
                         ShowGroupPanel="False"
                         ShowColumnHeaders="False"
                         IsFilteringAllowed="False"
                         CanUserFreezeColumns="True"
                         CanUserReorderColumns="False"
                         CanUserSortColumns="True"
                         CanUserResizeColumns="True"
                         RowIndicatorVisibility="Collapsed"
                         IsReadOnly="True"
                         RowHeight="15"
                         Padding="0"
                         >
                  <telerik:RadGridView.Columns>
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding IncidentParameter}" Header="Parameter" Width="180" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding ParameterValue}" Header="Value" Width="100" />
                  </telerik:RadGridView.Columns>
                </telerik:RadGridView>
              </StackPanel>

            </Grid>
          </DataTemplate>
        </telerik:RadGridView.RowDetailsTemplate>

        <telerik:RadGridView.Resources>

          <!--Template for Flow Document display-->
          <ControlTemplate x:Key="FlowDocCellTemplate"
                        TargetType="{x:Type telerik:GridViewCell}">
            <FlowDocumentScrollViewer Document="{Binding DescriptionAsFlowDocument}"
                                      VerticalAlignment="Center"
                                      ScrollViewer.VerticalScrollBarVisibility="Auto" />
          </ControlTemplate>
          <Style x:Key="FlowDocCellStyle" TargetType="{x:Type telerik:GridViewCell}">
            <Setter Property="telerik:GridViewCell.Template"
                    Value="{StaticResource FlowDocCellTemplate}" />
          </Style>

          <Style x:Key="SeverityCellStyle" TargetType="{x:Type telerik:GridViewCell}">
            <Setter Property="Foreground"
                    Value="{Binding Severity.Brush}" />
          </Style>

          <!--C o n t e x t   m e n u-->
          <ContextMenu x:Key="LogViewerContextMenu" Opened="ContextMenu_Opened">
            <MenuItem Header="Delete Log Entry"
                      Command="{Binding DeleteLogEntryCommand}" />
          </ContextMenu>

          <!--R o w   s t y l e: Grey italic for deleted items-->
          <Style TargetType="{x:Type telerik:GridViewRow}">
            <Style.Triggers>
              <DataTrigger Binding="{Binding Path=IsDeleted}" Value="True">
                <DataTrigger.Setters>
                  <Setter Property="Foreground" Value="LightGray" />
                  <Setter Property="FontStyle" Value="italic" />
                </DataTrigger.Setters>
              </DataTrigger>
            </Style.Triggers>
          </Style>

          <Style x:Key="GridViewToggleButtonColumnStyle" TargetType="telerik:GridViewCell">
            <Setter Property="Padding" Value="0,0,0,0" />
          </Style>

        </telerik:RadGridView.Resources>

        <telerik:RadGridView.Columns>
          <telerik:GridViewToggleRowDetailsColumn CellStyle="{StaticResource GridViewToggleButtonColumnStyle}" />
          <telerik:GridViewDataColumn DataMemberBinding="{Binding LoggedOn, Converter={StaticResource formatter}, ConverterParameter=' \{0:dd-MMM-yy\}'}" Header="Logged" Width="80" />
          <telerik:GridViewDataColumn DataMemberBinding="{Binding OccurredOn, Converter={StaticResource formatter}, ConverterParameter=' \{0:dd-MMM-yy\}'}" Header="Occurred" Width="90"/>
          <telerik:GridViewDataColumn DataMemberBinding="{Binding Source.Description}" Header="Source" Width="200" />
          <telerik:GridViewDataColumn DataMemberBinding="{Binding Incident.Name}" Header="Event" Width="80" />
          <telerik:GridViewDataColumn DataMemberBinding="{Binding IncidentRef}" Header="Event Ref." Width="100" />
          <telerik:GridViewDataColumn DataMemberBinding="{Binding Severity}" Header="Severity" Width="100"
                                      CellStyle="{StaticResource SeverityCellStyle}"
                                      />
          <telerik:GridViewDataColumn Width="*"
                                      DataMemberBinding="{Binding DescriptionAsFlowDocument}"
                                      Header="Description"
                                      CellStyle="{StaticResource FlowDocCellStyle}"
                                      />
        </telerik:RadGridView.Columns>
      </telerik:RadGridView>
    </Grid>
  </DockPanel>
</UserControl>

James

[Milan]

Hi James Stewart,

Thank you for sending us the code. We are currently investigating it and we will contact you as soon as we have more information.

Thank you for your patience.

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.

[James Stewart]

I have since found that by removing the FlowDocumentScrollViewer column (and putting same in the details row) that the "narrow column" effect is not seen - perhaps caused by the rendering process for this control?

HTH

James.

[Milan]

Hello James Stewart,

Whenever a star column is defined RadGridView needs two layout passes to setup all columns correctly which may cause the undesired visual behavior that you have described. I curious to find out if it really takes a couple of seconds until the columns are resized correctly? 

I have created a sample test project where I used the XAML code that you have provided. Does the initial  load time demonstrated in this video comes close to what you are observing in the real application.

One possible workaround is to show some kind of the loading indicator for a very short time to give the grid a change to calculate its columns correctly. This approach is demonstrated in this video.

Regards,
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.