Gridview columns shrink upon loading

[Perlom]

Hi all,

I have been trying to know the source of this issue with no luck for a while now. I am using WPF RadGrdiView 2012 Q1 SP1 in page that bound to a collection in View Model (MVVM/Prism). When the grid loads, if the row is empty (meaning the bound object is not empty but the corresponding properties are null), then the column are shrined even through the grid itself stretches to fill the entire page. It is as if the column didn’t render correctly to take the proper width. Please see attached pic.

The way the GridView is layed out :

RadDocking -> RadPane -> RadTab -> User Control -> StackPanel -> Grid -> GridView

I have tried to set the Horiznotal Content of the Gridview, Grid and StackPanel to “Stretch”, but that didn’t fix the issue.

Any suggestion why this might be happening? Is there a way to force the GridView to redraw/re-calculate column width on loading?

Thanks

[Perlom]

To be more precise, this behavior occurs when is switching from collapsed visible. I have the Visibility property bound to bool property in the VM, and when the visible condition is true.

[Vlad]

Hi,

 Do you have any settings for ColumnWidth and/or Width for the grid columns? 

Regards,
Vlad
the Telerik team

[Perlom]

Hi Vlad,

Yes all columns are set to a fixed value, except one column is set to “*”. Below is the XAML of that viewgrid. It is contained on a User Control that is contained inside a RadTabItem. We have wrapper for the gridview just to set some properties on loading. I have also tried to call these methods on Visibility change but didn’t resolve the issue 

    this.InvalidateMeasure(); 
    this.InvalidateArrange(); 
    this.InvalidateVisual(); 
    this.UpdateLayout();

<Grid Visibility="{Binding Path=DataContext.PlanEnrolment.HasCowCalf, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Sale:SaleManagementView}}, Converter={StaticResource BooleanToVisibilityConverter}}"
      HorizontalAlignment="Stretch" >
    <Grid.RowDefinitions>
        <RowDefinition  />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
   <Grid Grid.Row="0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
    <TextBlock Grid.Column="0" Text="Calf sales" Style="{StaticResource CategoryHeaderText}"/>
    <CheckBox Grid.Column="2"
              HorizontalAlignment="Right"
              VerticalAlignment="Center"
              x:Name="NoCowCalfSaleDataCheckBox" Margin="5, 0, 5, 1" Content="Check to indicate zero calf sales."
              IsChecked="{Binding Path=DataContext.IsCattlePlanCowCalfNoSaleData, RelativeSource={RelativeSource AncestorType=Sale:SaleManagementView}}"
              Visibility="{Binding Path=DataContext.IsQ2OrQ4, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Sale:SaleManagementView}}, Converter={StaticResource BooleanToVisibilityConverter}}"/>
</Grid>

   <RmpControls:RmpGridView x:Name="gridviewCalfSales" Grid.Row="1"
                         ItemsSource="{Binding Path=CalfSales}"
                         IsEnabled="{Binding ElementName=NoCowCalfSaleDataCheckBox, Path=IsChecked, Converter={StaticResource ReverseBooleanConverter}}"
                         IsSaleGrid="True" GridCategory="CattleCowCalf" Style="{StaticResource GridViewStyle}" ShowColumnFooters="False"
                         Visibility="{Binding Path=DataContext.IsQ2OrQ4, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Sale:SaleManagementView}}, Converter={StaticResource BooleanToVisibilityConverter}}">


    <RmpControls:RmpGridView.Columns>
        <telerik:GridViewDataColumn DataMemberBinding="{Binding SaleDate}" Width="100" DataFormatString="{}{0:MM/dd/yyyy}"
                                    TextAlignment="Left">
            <telerik:GridViewDataColumn.Header>
                <TextBlock Text="Sale Date" Style="{StaticResource ColumnHeaderTextStyle}" />
            </telerik:GridViewDataColumn.Header>
            <telerik:GridViewDataColumn.CellEditTemplate>
                <DataTemplate>
                        <RmpControls:RmpDatePicker Editable="False" SelectedDate="{Binding SaleDate}" DisplayDate="{Binding QuarterStartDate, Mode=OneWay}" DisplayDateStart="{Binding QuarterStartDate, Mode=OneWay}" DisplayDateEnd="{Binding QuarterEndDate, Mode=OneWay}"  />
               </DataTemplate>
            </telerik:GridViewDataColumn.CellEditTemplate>
        </telerik:GridViewDataColumn>
        <telerik:GridViewComboBoxColumn DataMemberBinding="{Binding Path=GenderId}"
                                            ItemsSource="{Binding Path=Genders}"
                                            UniqueName="CodeId"
                                            DisplayMemberPath="ShortDescription"
                                            SelectedValueMemberPath="CodeId" Width="60" >
            <telerik:GridViewComboBoxColumn.Header>
                <TextBlock Text="Gender" Style="{StaticResource ColumnHeaderTextStyle}" />
            </telerik:GridViewComboBoxColumn.Header>
        </telerik:GridViewComboBoxColumn>
        <RmpControls:RmpGridViewIntegerValueColumn DataMemberBinding="{Binding Path=HeadSold, Converter={StaticResource IntegerValueFormatConverter}}" Width="85" TextAlignment="Right">
            <RmpControls:RmpGridViewIntegerValueColumn.Header>
                <TextBlock Text="Number of head sold" Style="{StaticResource ColumnHeaderTextStyle}" />
            </RmpControls:RmpGridViewIntegerValueColumn.Header>
        </RmpControls:RmpGridViewIntegerValueColumn>
        <RmpControls:RmpGridViewDecimalValueColumn DataMemberBinding="{Binding Path=AverageLiveSaleWeight, Converter={StaticResource DecimalValueFormatConverter}}" Width="85" TextAlignment="Right">
            <RmpControls:RmpGridViewDecimalValueColumn.Header>
                <TextBlock Text="Average sale weight (lb)" Style="{StaticResource ColumnHeaderTextStyle}" />
            </RmpControls:RmpGridViewDecimalValueColumn.Header>
        </RmpControls:RmpGridViewDecimalValueColumn>
        <telerik:GridViewDataColumn DataMemberBinding="{Binding Path=PointOfSale}" Width="*" >
            <telerik:GridViewColumn.CellEditTemplate>
                <DataTemplate>
                    <RmpControls:RmpPopupTextEditor DataContext="{Binding}" MaxLength="500" Text="{Binding Path=PointOfSale,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Title="Primary point(s) of sale (Max. 500)" />
                </DataTemplate>
            </telerik:GridViewColumn.CellEditTemplate>
            <telerik:GridViewDataColumn.Header>
                <TextBlock Text="Primary point(s) of sale" Style="{StaticResource ColumnHeaderTextStyle}" />
            </telerik:GridViewDataColumn.Header>
        </telerik:GridViewDataColumn>
        <RmpControls:RmpGridViewButtonColumn Focusable="False" />
    </RmpControls:RmpGridView.Columns>
</RmpControls:RmpGridView>
    <TextBlock Grid.Row="2" Text="Please use Q2 or Q4 forms to enter Cow-calf sales data." FontSize="12" Margin="15,10,1,20"
               Visibility="{Binding Path=DataContext.IsQ2OrQ4, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Sale:SaleManagementView}}, Converter={StaticResource ReverseVisibilityBooleanConverter}}"/>
</Grid>
<!--Backgrounder cattle sales-->
<Grid Visibility="{Binding Path=DataContext.PlanEnrolment.HasBackgrounderOrFeedlot, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Sale:SaleManagementView}}, Converter={StaticResource BooleanToVisibilityConverter}}">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition />
        </Grid.RowDefinitions>
  <Grid Grid.Row="0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="auto"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Column="0" Text="Backgrounder and feedlot cattle sales" Style="{StaticResource CategoryHeaderText}" />
    <Grid Grid.Column="1" HorizontalAlignment="Right">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"></ColumnDefinition>
            <ColumnDefinition Width="auto"></ColumnDefinition>
            <ColumnDefinition Width="auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0" Visibility="{Binding Path=DataContext.PlanEnrolment.HasBackgrounderOrFeedlot, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Sale:SaleManagementView}}, Converter={StaticResource BooleanToVisibilityConverter}}" Text="Check to indicate zero sales for" Margin="8, 10, 5, 1"  />
        <CheckBox Grid.Column="1"
              HorizontalAlignment="Right"
              VerticalAlignment="Top"
              x:Name="NoBackgrounderDataCheckBox" Margin="8, 10, 5, 1" Content="Backgrounder"
              IsChecked="{Binding Path=DataContext.IsCattlePlanBackgrounderNoSaleData, RelativeSource={RelativeSource AncestorType=Sale:SaleManagementView}}"
              Visibility="{Binding Path=DataContext.PlanEnrolment.HasBackgrounder, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Sale:SaleManagementView}}, Converter={StaticResource BooleanToVisibilityConverter}}"    />
        <CheckBox Grid.Column="2"
              HorizontalAlignment="Right"
              VerticalAlignment="Top"
              x:Name="NoFeedlotDataCheckBox" Margin="8, 10, 5, 1" Content="Feedlot"
              IsChecked="{Binding Path=DataContext.IsCattlePlanFeedlotNoSaleData, RelativeSource={RelativeSource AncestorType=Sale:SaleManagementView}}"
              Visibility="{Binding Path=DataContext.PlanEnrolment.HasFeedlot, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Sale:SaleManagementView}}, Converter={StaticResource BooleanToVisibilityConverter}}"/>
    </Grid>
</Grid>

[Dimitrina]

Hi,

May I ask you to test what is the result if you place the GridView directly in the main Grid, outside of the RadDocking?  

Greetings,
Didie
the Telerik team

[Perlom]

Hi Didie,

Unfortunately it is not feasible to test this scenario and have the viewgrid outside the RadDocking. It is a huge Prism application now and the workflow (loading the module, making WCF calls to fetch data, loading the user control..etc) makes it impossible to remove the viewgrid outside of this flow.

Any other suggestion?

[Perlom]

I was able to find a work around this issue to force the gridview to honor the column widths by toggling the visibility of one of the columns of the grid inside the IsVisibleChanged event. 

    this.Columns[0].IsVisible = false; 
    this.Columns[0].IsVisible = true;

Cheers :)