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.InitializeComponent();  
        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:RadDataGrid.Columns> 
        <telerikGrid:DataGridTextColumn PropertyName="Country" Header="Country" Width="100"/> 
        <telerikGrid:DataGridTextColumn PropertyName="Capital" Header="Capital" Width="200"/> 
    </telerikGrid:RadDataGrid.Columns> 
</telerikGrid:RadDataGrid> 

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:RadDataGrid.Columns> 
               <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" /> 
           </telerikGrid:RadDataGrid.Columns> 
       </telerikGrid:RadDataGrid> 
   

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":