Column Widths

[Gerry]

Having some issues with column widths. I want to statitcally set the width of all my columns except one and that one I want to expand or contract based on the size of my grid as my UWP form is resized, etc. With a previous grid I simply set the width of all the static columns to a value and then set the column of my dynamic column to star. Star is not accepted by the column width property here and the size modes dont seem to have a value that accommodates this.

 

What am I missing?

[Stefan Nenchev]

Hi, Gerry,

As advised in the ticket you have raised, you can achieve the behavior by setting the following properties.

For the static columns:

<telerikDataGrid:DataGridTextColumn PropertyName="Country"
        Width="100"
        SizeMode="Fixed">

For the dynamic ones:

<telerikDataGrid:DataGridTextColumn PropertyName="Capital"
        SizeMode="Stretch" >

Have a great rest of the week.

Regards,
Stefan Nenchev
Progress Telerik

[Franz]

The solution work with expanding size.

But how is it possible to contract based on the size of the grid?

I need all columns except one to have SizeMode Auto. And one column to fill the rest place, not expanding if values are wider.

[Didi]

Hello Franz,

In order to have one column Stretch and the rest AutoSized you will need to place the RadDataGrid inside of a GridLayout, for example:

<Grid>
    <telerikDataGrid:RadDataGrid x:Name="dataGrid"
                    ItemsSource="{Binding Items}"
                    UserEditMode="Cell"
                    AutoGenerateColumns="False">
        <telerikDataGrid:RadDataGrid.Columns>
            <telerikDataGrid:DataGridTextColumn PropertyName="Name" HeaderText="Country" SizeMode="Stretch"/>
            <telerikDataGrid:DataGridNumericalColumn PropertyName="Population" HeaderText="Population"/>
            <telerikDataGrid:DataGridNumericalColumn PropertyName="TestA" HeaderText="TestA"/>
            <telerikDataGrid:DataGridNumericalColumn PropertyName="TestB" HeaderText="TestB"/>
            <telerikDataGrid:DataGridNumericalColumn PropertyName="TestC" HeaderText="TestC" SizeMode="Fixed" Width="60"/>
        </telerikDataGrid:RadDataGrid.Columns>
    </telerikDataGrid:RadDataGrid>
</Grid>

The SizeMode="Stretch" means that the column is stretched to the available width proportionally to its desired width. For more details on the DataGrid Column properties check our help article: DataGrid Columns Overview

I hope this will help.

Regards,
Didi
Progress Telerik

[Franz]

No, it doesn't work.There is still horizontal scrolling. I need to avoid horizontal scrolling.

Here is an attached sample.

There are three columns in the grid. The first and the third ones must be always visible without horizontal scrolling. The column in the middle must take only available space, not wider.

[Didi]

Hi Franz,

I am sorry to hear that the provided solution didn't help.

By default the RadDataGrid Columns are sized in a way to visualize the content of the cell. As to the columns' sizing modes - indeed, when Stretched size mode is used, the column takes the available space, however it stretches in order to accommodate longer strings, thus pushing other columns off the visible area and causing horizontal scrolling.  

Solution:

You'd need to set fixed width to the second column as well taking into account the screen width (using SizeChanged, for example). At the moment, the only solution I could suggest is to use TemplateColumn instead of TextColumn and implement the above described logic, as in the template you could add a Label and set its LineBreakMode. Here is the snippet:

<grid:RadDataGrid x:Name="grid"
                ItemsSource="{Binding Items}"
                SelectionMode="None"
                UserSortMode="Single"
                UserEditMode="None"
                UserFilterMode="Disabled"
                GridLinesVisibility="Both"
                AutoGenerateColumns="False"
                SizeChanged="Grid_SizeChanged">
    <grid:RadDataGrid.Columns>
        <grid:DataGridTimeColumn SizeMode="Fixed" Width="100" PropertyName="Time"/>
        <grid:DataGridTemplateColumn HeaderText="Title" SizeMode="Fixed">
            <grid:DataGridTemplateColumn.CellContentTemplate>
                <DataTemplate>
                    <Label Text="{Binding Title}"
                        Margin="10"
                        HorizontalOptions="Start"
                        LineBreakMode="WordWrap"/>
                </DataTemplate>
            </grid:DataGridTemplateColumn.CellContentTemplate>
        </grid:DataGridTemplateColumn>
        <grid:DataGridNumericalColumn PropertyName="Author" Width="100" SizeMode="Fixed"/>
    </grid:RadDataGrid.Columns>
</grid:RadDataGrid>

and the event handler:

private void Grid_SizeChanged(object sender, EventArgs e)
{
    grid.Columns[1].Width = grid.Width - 200;
}

Please note that TemplateColumn has some limitations compared to the built-in columns - for example, it does not support sorting, filtering and editing.

Regards,
Didi
Progress Telerik

[Bruce]

This has been a useful thread. However, I discovered another problem with setting the size mode to Fixed. If the text is longer than the column width, it just overlaps with the remaining columns! This is obviously not a desirable aspect (probably for anyone's application). Is there a way to ensure that the text automatically is cut off with the width of the column?

[Yana]

Hello Bruce,

I guess you're using TextColumn with SizeMode set to Fixed - indeed, in that case, the text is not wrapped.  We have a feature request regarding this functionality, please cast your vote and follow the public item below in order to get notified on status changes:

DataGrid: Add TextWrap property

For the time being, as suggested below, you can use TemplateColumn and place it it a Label with LineBreakMode property applied.

I am sorry for any inconvenience caused. Let me know if I can assist with anything else.

Regards,
Yana
Progress Telerik