RadGridView column changes width when OnPropertyChanged is called and grid scrollbar is visible

[Hugo]

Windows 10
.NET Framework 4.8
Telerik 2022.1.222.45

Hi
I encountered a problem with the RadGridView when I have three columns defined and as shown here (MainWindow.xaml):

<Window
  x:Class="TestGridView.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
  Title="MainWindow"
  Width="800"
  Height="450"
  mc:Ignorable="d">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="*" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <telerik:RadGridView AutoGenerateColumns="False" ItemsSource="{Binding DummyData}">
      <telerik:RadGridView.Columns>
        <telerik:GridViewDataColumn
          Width="Auto"
          MinWidth="32"
          DataMemberBinding="{Binding Column01}"
          Header="Column01" />

        <telerik:GridViewDataColumn
          Width="Auto"
          MinWidth="250"
          DataMemberBinding="{Binding Column02}"
          Header="Column02" />

        <telerik:GridViewDataColumn
          Width="*"
          MinWidth="250"
          DataMemberBinding="{Binding Column03}"
          Header="Column03" />
      </telerik:RadGridView.Columns>
    </telerik:RadGridView>

    <Button
      Grid.Row="1"
      Click="Button_Click"
      Content="Refresh" />
  </Grid>
</Window>

Column 1 and 2 have defined Width="Auto" and the last column 3 have defined Width="*".

The problem is now when I run the application and increase the column width of column 2 and reduce window width so you can see the horizontal grid scrollbar and then press the "Refresh" button the width of the columns will change sometimes.

For having the complete example here is the code for MainWindow.xaml.cs

using System.Collections.Generic;
using System.Windows;

namespace TestGridView
{
  /// <summary>
  /// Interaction logic for MainWindow.xaml
  /// </summary>
  public partial class MainWindow : Window
  {
    public MainWindow()
    {
      InitializeComponent();
      DataContext = this;
      LoadData();
    }

    public List<DataViewModel> DummyData { get; } = new List<DataViewModel>();

    private void LoadData()
    {
      for (var i = 0; i < 15; i++)
      {
        DummyData.Add(new DataViewModel() { Column01 = "Col01_" + i, Column02 = "Col02_" + i, Column03 = "Col03_" + i });
      }
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
      foreach (var vm in DummyData)
      {
        vm.UpdateProperties();
      }
    }
  }
}

And the code vor the DataViewModel:

using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace TestGridView
{
  public class DataViewModel: INotifyPropertyChanged
  {
    public string Column01 { get; set; }

    public string Column02 { get; set; }

    public string Column03 { get; set; }

    public void UpdateProperties()
    {
      OnPropertyChanged(nameof(Column01));
      OnPropertyChanged(nameof(Column02));
      OnPropertyChanged(nameof(Column03));
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
      PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
  }
}

When I replace the RadGridView with the WPF built in DataGrid, Everything works as expected!

Here is the code for MainWindow.xaml with the WPF DataGrid:

<Window
  x:Class="TestGridView.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
  Title="MainWindow"
  Width="800"
  Height="450"
  mc:Ignorable="d">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="*" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>
        <DataGrid
      MaxHeight="150"
      AutoGenerateColumns="False"
      ItemsSource="{Binding DummyData}"
      ScrollViewer.CanContentScroll="True"
      ScrollViewer.HorizontalScrollBarVisibility="Auto"
      ScrollViewer.VerticalScrollBarVisibility="Auto">
            <DataGrid.Columns>
                <DataGridTextColumn
          Width="Auto"
          MinWidth="32"
          Binding="{Binding Column01}" />
                <DataGridTextColumn
          Width="Auto"
          MinWidth="250"
          Binding="{Binding Column02}" />
                <DataGridTextColumn
          Width="*"
          MinWidth="250"
          Binding="{Binding Column03}" />
            </DataGrid.Columns>
        </DataGrid>
        <Button
      Grid.Row="1"
      Click="Button_Click"
      Content="Refresh" />
  </Grid>
</Window>

Do I miss something or what could be a solution to fix this problem ?

Thanks!

[Stenly]

Hello Hugo,

Currently, this is the default behavior of the RadGridView control. When a property from the model raises the property changed event, the RadGridView will automatically recalculate the width of all of its columns depending on the values set to the Width property (either if it's a fixed, Auto, or "*" value). This behavior cannot be changed on the level of the RadGridView, as it will result in a lower overall performance of the control when having a lot of columns.

In addition, it is not a good practice to set fixed sizes on columns with their Width being set to "*", as their whole idea is to take as much of the available space, that is left from columns with a fixed width or their width being set to Auto.

With this being said, what comes to my mind, would be to not set the MinWidth property of the last column, as well as reapply the default template of RadGridView when calling the Refresh logic.

private void Button_Click(object sender, RoutedEventArgs e)
{
    foreach (var vm in DummyData)
    {
        vm.UpdateProperties();
    }

    var t = this.gridView.Template;
    this.gridView.Template = null;
    this.gridView.Template = t;
}

I hope the provided information will be of help to you.

Regards,
Stenly
Progress Telerik

[Hugo]

I removed the MindWidth property and set the with to auto as well as the default demplate.

Now it looks like the problem is solved :-)

Thank you!

Regards,
Hugo