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

Template Column

If you want to completely customize the content of the cells in a grid column you can use DataGridTemplateColumn, which uses a DataTemplate to describe the content of each associated grid cell.

Key Properties

The DataGridTemplateColumn supports Grouping and Sorting from the UI out of the box through the DataGridTemplateColumn.SortDescriptor and DataGridTemplateColumn.GroupDescriptor properties. Programmatic grouping or sorting is not supported.

  • SortDescriptor (SortDescriptorBase): Gets or sets an instance of the SortDescriptorBase class that defines how the column will be sorted by the user upon a Tap gesture over the column header.
  • GroupDescriptor (GroupDescriptorBase): Gets or sets an instance of the GroupDescriptorBase class that defines whether and how the column can be grouped by the user using drag-and-drop operation.
  • CellContentTemplate (DataTemplate): Gets or sets the DataTemplate instance that defines the appearance of each cell associated with this column.
  • CellContentTemplateSelector (DataTemplateSelector): Gets or sets a DataTemplateSelector instance that may be used to retrieve dynamic data templates on a per cell basis.

Example

The following example shows how to make a RadDataGrid with DataGridTemplateColumn. First we need to create our business object.

Example 1: Create Data model

public class Data 
{ 
    public string Country { get; set; } 
 
    public BitmapImage Flag { get; set; } 
} 
The next step is to create sample data.

Example 2: Create Sample Data

public MainPage() 
{ 
    this.InitializeComponent(); 
 
    this.DataContext = new List<Data>() 
    { 
        new Data { Country = "Argentina", Flag = new BitmapImage(new Uri("ms-appx:///Argentina.png", UriKind.Absolute)) }, 
        new Data { Country = "Brazil", Flag = new BitmapImage(new Uri("ms-appx:///Brazil.jpg", UriKind.Absolute)) }, 
        new Data { Country = "China", Flag = new BitmapImage(new Uri("ms-appx:///China.jpg", UriKind.Absolute)) }, 
    };       
}    
The final step is to bind the ItemsSource property of the RadDataGrid and manually declare DataGridNumericalColumn. Example 3 shows the XAML definition. As you can see the DataTemplate of the second DataGridTemplateColumns is an image.

Example 3: Defining in XAML

<telerikGrid:RadDataGrid x:Name="grid" Height="300" Width="300" AutoGenerateColumns="False" VerticalAlignment="Center" ItemsSource="{Binding}"> 
    <telerikGrid:RadDataGrid.Columns> 
        <telerikGrid:DataGridTemplateColumn Header="Country"> 
            <telerikGrid:DataGridTemplateColumn.CellContentTemplate> 
                <DataTemplate> 
                    <TextBlock Text="{Binding Country}" HorizontalAlignment="Center" VerticalAlignment="Center"/> 
                </DataTemplate> 
            </telerikGrid:DataGridTemplateColumn.CellContentTemplate> 
        </telerikGrid:DataGridTemplateColumn> 
 
        <telerikGrid:DataGridTemplateColumn Header="Flag"> 
            <telerikGrid:DataGridTemplateColumn.CellContentTemplate> 
                <DataTemplate> 
                    <StackPanel> 
                        <Image Source="{Binding Flag}" Stretch="UniformToFill" Width="100" Height="100" /> 
                    </StackPanel> 
                </DataTemplate> 
            </telerikGrid:DataGridTemplateColumn.CellContentTemplate> 
        </telerikGrid:DataGridTemplateColumn> 
    </telerikGrid:RadDataGrid.Columns> 
</telerikGrid:RadDataGrid> 

Figure 1: Template Column

DataGrid Template Column

In this article
Not finding the help you need?