New to Telerik UI for WinUI? Download free 30-day trial

Set a Column's Width

This article describes how to use the SizeMode and Width properties.

The width of each column in a RadDataGrid depends on its SizeMode and Width properties. We’ll walk through an example that shows how the size of each column changes depending on the value of the SizeMode property:

To begin this example we can create a custom class, that represents our objects and create sample data to populate the RadDataGrid with.

Example 1: Create Sample Data

public sealed partial class MainPage : Page 
    public MainPage() 
        this.grid.ItemsSource = new List<Data> 
            new Data { Country = "Columbia", Capital = "Bogota" }, 
            new Data { Country = "Germany", Capital = "Berlin" }, 
            new Data { Country = "Italy", Capital = "Rome" }, 
            new Data { Country = "France", Capital = "Paris" }, 
            new Data { Country = "Bulgaria", Capital = "Sofia" }, 
public class Data 
    public string Country { get; set; }  
    public string Capital { get; set; } 

Example 2: Declare RadDataGrid

<telerikGrid:RadDataGrid x:Name="grid" AutoGenerateColumns="False" Width="300" VerticalAlignment="Center"> 
        <telerikGrid:DataGridTextColumn PropertyName="Country" Header="Country" Width="100"/> 
        <telerikGrid:DataGridTextColumn PropertyName="Capital" Header="Capital" Width="200"/> 

The Width property of columns will apply only when SizeMode="Fixed"

  1. In the first scenario we will set SizeMode="Fixed":

    Example 3: SizeMode set to Fixed

        this.grid.Columns[0].SizeMode = DataGridColumnSizeMode.Fixed; 
        this.grid.Columns[1].SizeMode = DataGridColumnSizeMode.Fixed; 
    The first and second columns have set widths of 100 and 200, respectively.
  2. In the second scenario we will set SizeMode="Stretch":

    Example 4: SizeMode set to Stretch

        this.grid.Columns[0].SizeMode = DataGridColumnSizeMode.Stretch; 
        this.grid.Columns[1].SizeMode = DataGridColumnSizeMode.Stretch; 

    The columns take all the available space proportionally. The Width property is ignored.
  3. In the third scenario, we will set SizeMode="Auto":

    Example 5: SizeMode set to Auto

        this.grid.Columns[0].SizeMode = DataGridColumnSizeMode.Auto; 
        this.grid.Columns[1].SizeMode = DataGridColumnSizeMode.Auto; 
    The columns take only as much space as they need. The Width property is ignored.
  4. In the last scenario, we will demonstrate using three columns to fully clarify the SizeMode behavior:

    Example 6: Declare RadDataGrid

        <telerikGrid:RadDataGrid x:Name="grid" AutoGenerateColumns="False" Width="400" VerticalAlignment="Center"> 
                <telerikGrid:DataGridTextColumn PropertyName="Country" Header="Country" SizeMode="Fixed" Width="100" /> 
                <telerikGrid:DataGridTextColumn PropertyName="Capital" Header="Capital" SizeMode="Stretch" /> 
                <telerikGrid:DataGridTextColumn PropertyName="Country" Header="Country" SizeMode="Fixed" Width="100" /> 

The first and the third columns each have a fixed size of 100 and the second column takes all the available space because of SizeMode="Stretch":

In this article
Not finding the help you need?