This is a migrated thread and some comments may be shown as answers.
Column Widths
7 Answers 92 Views
This is a migrated thread and some comments may be shown as answers.
Gerry
Top achievements
Rank 1
Gerry asked on 17 Feb 2018, 08:30 PM

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?

7 Answers, 1 is accepted

Sort by
0
Stefan Nenchev
Telerik team
answered on 21 Feb 2018, 11:59 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Franz
Top achievements
Rank 1
answered on 21 May 2019, 07:30 AM

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.

0
Didi
Telerik team
answered on 21 May 2019, 11:16 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Franz
Top achievements
Rank 1
answered on 21 May 2019, 01:17 PM

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.

0
Didi
Telerik team
answered on 21 May 2019, 03:04 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Bruce
Top achievements
Rank 2
answered on 23 Dec 2019, 04:07 PM
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?
0
Yana
Telerik team
answered on 26 Dec 2019, 08:27 AM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Gerry
Top achievements
Rank 1
Answers by
Stefan Nenchev
Telerik team
Franz
Top achievements
Rank 1
Didi
Telerik team
Bruce
Top achievements
Rank 2
Yana
Telerik team
Share this question
or