Image Column

Updated on Mar 26, 2026

The DataGridImageColumn shows images in the column cells.

The following example shows how to generate the DataGridImageColumn manually.

1. First, create the business object.

Create the Data Model

C#

public class Data
{
	public string Country { get; set; }
	public BitmapImage Flag { get; set; }
}

1. The next step is to create some sample data.

Create Sample Data

C#

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.png")) },
		new Data { Country = "China", Flag = new BitmapImage(new Uri("ms-appx:///China.png")) },
	};
}

1. To associate each column with the relevant property from the model, the example also uses the PropertyName property.

Define PropertyName in XAML

XAML

<telerikGrid:RadDataGrid AutoGenerateColumns="False" x:Name="grid" ItemsSource="{Binding}" Height="350" Width="400">
	<telerikGrid:RadDataGrid.Columns>
		<telerikGrid:DataGridImageColumn PropertyName="Flag" Header="Flag"/>
		<telerikGrid:DataGridTextColumn PropertyName="Country" Header="Country"/>
	</telerikGrid:RadDataGrid.Columns>
</telerikGrid:RadDataGrid>

Image Column