UWP Telerik RadDataGrid expands with page but doesn't shrink

Question

I have a RadDataGrid that is used to display some business data. All but one column is a set size, so there is one that should expand to fill the gap. When the page expands, the grid expands and the one column grows with it. When I try to shrink the page down the grid stays the same size and the page gets scroll bars instead. I can get it to shrink if I shrink the page very slowly, but once the mouse picks up some speed, it looses it and stops shrinking. I've tried wrapping it in a grid or a RelativePanel but neither has made a difference.

I've looked at the sample code and the Enterprise Contorso demo that uses the grid and they seem to be able to expand and shrink as needed.

An example XAML:

<Page x:Class="RadDataGridTest.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:RadDataGridTest"
  xmlns:Grid="using:Telerik.UI.Xaml.Controls.Grid"
  xmlns:telerikGridPrimitive="using:Telerik.UI.Xaml.Controls.Grid.Primitives"
  xmlns:Primitives="using:Telerik.UI.Xaml.Controls.Primitives"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid>
    <Grid:RadDataGrid ItemsSource="{x:Bind DataItems, Mode=OneWay}"
                      UserGroupMode="Disabled"
                      UserFilterMode="Disabled"
                      UserColumnReorderMode="None"
                      UserSortMode="None"
                      AutoGenerateColumns="False"
                      GridLinesVisibility="Horizontal">
        <Grid:RadDataGrid.Columns>
            <Grid:DataGridNumericalColumn Header="1"
                                          PropertyName="Key"
                                          SizeMode="Auto" />
            <Grid:DataGridTextColumn Header="2"
                                     PropertyName="First"
                                     SizeMode="Auto" />
            <Grid:DataGridTextColumn Header="3"
                                     PropertyName="Second"
                                     SizeMode="Auto" />
            <Grid:DataGridTextColumn Header="Stretchy"
                                     PropertyName="Stretch" />
            <Grid:DataGridTextColumn Header="5"
                                     PropertyName="SecondLast"
                                     SizeMode="Auto" />
            <Grid:DataGridTextColumn Header="6"
                                     PropertyName="Last"
                                     SizeMode="Auto" />
            <Grid:DataGridNumericalColumn Header="7"
                                          PropertyName="Count"
                                          SizeMode="Auto" />
        </Grid:RadDataGrid.Columns>
    </Grid:RadDataGrid>
</Grid>

Any help on what I might be doing wrong?

Answer 1

I was able to reproduce this. You're not doing anything wrong, the center column should resize when the window size changes.

I've added it to the backlog, which you can up-vote and follow in this Feedback Portal item:

https://feedback.telerik.com/Project/167/Feedback/Details/250207-datagrid-when-start-and-end-columns-are-auto-sized-the-middle-stretch-sized-col

When you're subscribed, you'll be notified when there are status changes to the item.

Workaround

There is a workaround, you can try. If you set the Stretchy column's SizeMode to Fixed, you can manually resize it when the DataGrid's size changes.

Step 1 - Subscribe to the DataGrid.SizedChanged and set the Stretchy column's SizeMode to Fixed

<grid:RadDataGrid SizeChanged="DataGrid_OnSizeChanged" ...>
    <grid:RadDataGrid.Columns>
        ...
        <grid:DataGridTextColumn Header="Stretchy"
                                 PropertyName="Stretch"
                                 SizeMode="Fixed"
                                 Width="200"/>
        ...
    </grid:RadDataGrid.Columns>
</grid:RadDataGrid>

Step 2 - In OnSizeChanged, update the Stretchy column's width using the available space (see my code comments)

private void DataGrid_OnSizeChanged(object sender, SizeChangedEventArgs e)
{
    // for performance improvement only do this when the resize is larger than 1 px
    if (e.NewSize.Width - e.PreviousSize.Width > 1)
        return;

    if (sender is RadDataGrid dg && dg.Columns.Count > 0)
    {
        var middleColumn = dg.Columns[3];

        if (middleColumn == null)
            return;

        double autoColumnsWidthTotal = 0;

        // iterate over all the other columns and add the total width
        foreach (var column in dg.Columns)
        {
            if (column != middleColumn)
            {
                autoColumnsWidthTotal = autoColumnsWidthTotal + column.Width;
            }
        }

        // Get the remaining with available for the "Stretchy" column
        var remainingSpace = e.NewSize.Width - autoColumnsWidthTotal;

        // Set the Stretchy column's width using the remaingin space
        // IMPORTANT: You need to set the column's SizeMode to Fixed in order for it to respect the Width value.
        middleColumn.Width = remainingSpace;
    }
}