Telerik UI for Windows 8 XAML

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 set the ItemsSource of a DataGrid:

C# Copy imageCopy
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" },

Data is our custom class, that represents our objects:

C# Copy imageCopy
public class Data
    public string Country { get; set; }

    public string Capital { get; set; }

Here's the XAML definition:

XAML Copy imageCopy
<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":

    C# Copy imageCopy
    this.grid.Columns[0].SizeMode = DataGridColumnSizeMode.Fixed;
    this.grid.Columns[1].SizeMode = DataGridColumnSizeMode.Fixed;

    As you can see, the first and second columns have set widths of 100 and 200, respectively.

    Size Mode Fixed
  2. In the second scenario we will set SizeMode="Stretch":

    C# Copy imageCopy
    this.grid.Columns[0].SizeMode = DataGridColumnSizeMode.Stretch;
    this.grid.Columns[1].SizeMode = DataGridColumnSizeMode.Stretch;

    In this case, the columns take all the available space proportionally. The Width property is ignored.

    Size Mode Stretch
  3. In the third scenario, we will set SizeMode="Auto":

    C# Copy imageCopy
    this.grid.Columns[0].SizeMode = DataGridColumnSizeMode.Auto;
    this.grid.Columns[1].SizeMode = DataGridColumnSizeMode.Auto;

    In this case, the columns take only as much space as they need. The Width property is ignored.

    Size Mode Auto
  4. In the last scenario, we will demonstrate using three columns to fully clarify the SizeMode behavior:

    XAML Copy imageCopy
    <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"   />

    As you can see, 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":

    Size Mode Mixed