Image Column

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

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

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

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

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

   Define PropertyName in 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