Telerik UI for Windows 8 XAML

This article demonstrates how to use the CellContentTemplateSelector property.

The following example shows pictures of flags. Some of the flags do not have pictures so we will take advantage of the CellContentTemplateSelector property to handle this case with an appropriate DataTemplate.

Template Column Cell Content Template Selector Property

For this example we will need a custom class which inherits from the DataTemplateSelector and also override the SelectTemplateCore method which returns an object of type DataTemplate:

C# Copy imageCopy
public class CustomDataTemplateSelector : DataTemplateSelector
    public DataTemplate ImageTemplate { get; set; }

    public DataTemplate NoImageFoundTemplate { get; set; }

    protected override Windows.UI.Xaml.DataTemplate SelectTemplateCore(object item, Windows.UI.Xaml.DependencyObject container)
        if ((item as CustomObject).Flag == null)
            return this.NoImageFoundTemplate;
            return this.ImageTemplate;

Our logic is pretty simple. When there is an available picture, it will be displayed and when there is not an available picture, a proper message will be displayed.

Then we will define the CustomDataTemplateSelector in our DataGrid resources and use it as a StaticResource when setting the CellContentTemplateSelector property:

XAML Copy imageCopy
<telerikGrid:RadDataGrid x:Name="grid" AutoGenerateColumns="False" VerticalAlignment="Center">
        <local:CustomDataTemplateSelector x:Key="CustomDataTemplateSelector">
                        <Image Source="{Binding Flag}" Stretch="UniformToFill" Width="100" Height="100" />
                    <TextBlock Text="No Image Found" FontSize="16" FontStyle="Italic"
                       Foreground="Red" HorizontalAlignment="Center" />

        <telerikGrid:DataGridTemplateColumn Header="Country">
                    <TextBlock Text="{Binding Country}" HorizontalAlignment="Center" VerticalAlignment="Center"/>

        <telerikGrid:DataGridTemplateColumn Header="Flag" CellContentTemplateSelector="{StaticResource CustomDataTemplateSelector}">


Here we pass data to our DataGrid:

C# Copy imageCopy
List<CustomObject> list = new List<CustomObject>();
list.Add(new CustomObject { Country = "Germany", Flag = new BitmapImage(new Uri("ms-appx:///Germany.png", UriKind.Absolute)) });
list.Add(new CustomObject { Country = "England", Flag = null });
list.Add(new CustomObject { Country = "Mexico", Flag = new BitmapImage(new Uri("ms-appx:///Mexico.png", UriKind.Absolute)) });
list.Add(new CustomObject { Country = "Kenya", Flag = null });
list.Add(new CustomObject { Country = "South-Africa", Flag = new BitmapImage(new Uri("ms-appx:///South-Africa.png", UriKind.Absolute)) });
this.grid.ItemsSource = list;

Where CustomObject is our custom class that defines each object:

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

    public BitmapImage Flag { get; set; }