Category / Section
How to load different images in GridCell based on cell value in WPF DataGrid (SfDataGrid)?
2 mins read
You can load the image in GridCell using GridImageColumn in WPF DataGrid (SfDataGrid). You can also load different images in a column based on cell value by creating DataTemplate for the GridTextColumn. Using DataTrigger you can load the different images like below code example.
XAML
<Syncfusion:SfDataGrid x:Name="datagrid"
AllowEditing="True"
AllowFiltering="True"
AutoGenerateColumns="False"
ItemsSource="{Binding GDCSource}">
<Syncfusion:SfDataGrid.Columns>
<Syncfusion:GridTextColumn MappingName="ShowCellIcon" />
<Syncfusion:GridTextColumn MappingName="ShowCellIcon">
<Syncfusion:GridTextColumn.CellTemplate>
<DataTemplate>
<Image>
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="Images/no.png" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=ShowCellIcon}" Value="true">
<Setter Property="Source" Value="Images/yes.png" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</DataTemplate>
</Syncfusion:GridTextColumn.CellTemplate>
</Syncfusion:GridTextColumn>
</Syncfusion:SfDataGrid.Columns>
</Syncfusion:SfDataGrid>
In UWP, instead of DataTrigger you can use converter for loading image in GridCell based on Cell value like below code example.
XAML
<Syncfusion:SfDataGrid x:Name="datagrid"
AllowEditing="True"
AllowFiltering="True"
AutoGenerateColumns="True"
ItemsSource="{Binding GDCSource}">
<Syncfusion:SfDataGrid.Columns>
<Syncfusion:GridTextColumn MappingName="ShowCellIcon"></Syncfusion:GridTextColumn>
<Syncfusion:GridTextColumn MappingName="ShowCellIcon">
<Syncfusion:GridTextColumn.CellTemplate>
<DataTemplate>
<Image Source="{Binding Converter={StaticResource iconConverter}}">
</Image>
</DataTemplate>
</Syncfusion:GridTextColumn.CellTemplate>
</Syncfusion:GridTextColumn>
</Syncfusion:SfDataGrid.Columns>
</Syncfusion.SfDataGrid>
C#
public class IconConverter :IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
var record = value as Model;
//Loading Image based on GridCell value.
var image=(record.ShowCellIcon) ? "Images/yes.png" : "Images/no.png";
return image;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
