DataGrid column SizeMode stretch not behaving as expected

[mhmd-azeez]

Description

I am not sure if this is a bug, or I have not used the DataGrid correctly. But here is what I want:

I want the Name column to stretch to fill all of the available width while the other columns are auto sized. If the text in Name column was too long, I want it to wrap.

Steps to Reproduce

1. Use this XAML

<telerikGrid:RadDataGrid Grid.Row="1" x:Name="DataGrid" 
                         UserGroupMode="Disabled" AutoGenerateColumns="False" UserEditMode="Inline">
    <telerikGrid:RadDataGrid.Columns>
        <telerikGrid:DataGridTextColumn PropertyName="Barcode" CanUserEdit="False"/>
        
        <telerikGrid:DataGridTextColumn SizeMode="Stretch" x:Name="NameColumn"
                                        PropertyName="Name" CanUserEdit="False" />
        
        <telerikGrid:DataGridNumericalColumn PropertyName="Quantity"/>
        <telerikGrid:DataGridNumericalColumn PropertyName="Price"/>
        <telerikGrid:DataGridNumericalColumn PropertyName="TotalPrice" CanUserEdit="False"/>
    </telerikGrid:RadDataGrid.Columns>
</telerikGrid:RadDataGrid>

2. And this model:

public class Item : INotifyPropertyChanged
{
    public string Barcode { get; set; }
    public string Name { get; set; }

    public double TotalPrice => Quantity * Price;

    private double _quantity;
    public double Quantity
    {
        get { return _quantity; }
        set 
        { 
            _quantity = value;
            OnPropertyChanged(nameof(TotalPrice));
        }
    }

    private double _price;
    public double Price
    {
        get { return _price; }
        set
        {
            _price = value;
            OnPropertyChanged(nameof(TotalPrice));
        }
    }

    private void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

Expected Behavior

The Name column will wrap it's content so that the DataGrid doesn't need a horizontal scrollbar.

Actual Behavior

The name column keeps on growing and the datagrid will have a scrollbar. If we move the scrollbar, the scrollbar disappears.

Basic Information

• Version with issue: 1.0.1.8
• Last known good version: N/A
• IDE: Visual Studio 2019
• UWP SDK: 1809
• Nuget Packages:

Screenshots

https://youtu.be/GMeSBaBK5M0

Note: The video is recorded on a 1080p screen.

Reproduction Link

datagrid-column-sizing-repro.zip

[mhmd-azeez]

The closest thing I could find was this question on stackoverflow: https://stackoverflow.com/q/50468613/7003797

[APopatanasov]

Hi @encrypt0r,

Thank you for the attached project. Using it I was able to reproduce the described behavior with the ScrollViewer.

Basically, when initially the DataGrid is loaded the columns are still not measured and because of that the calculations for stretching are not correct. Once the ScrollBar is moved a new measure is triggered and at that point the columns are correctly measured. This behavior is deeply connected with the engine of the DataGrid and its update service and because of that currently it cannot easily be resolved.

For your particular scenario I suggest you to use the approach suggested by Lance in StackOverflow. The columns' size could be set to Fixed and using some custom logic to calculate it. You can also use the CellContentStyle to set the desired wrapping of the cell - thus the Grid will always take the current width of the screen and there will be no scrollbars.

I have modified your project with the suggested above approach. Hope this will help you. RadDataGrid_444.zip