How to change image in datagrid cell based on data trigger

[Diego Fernando Urabayen]

I have a field with boolean data and I need to display in a sfdatagrid cell an icon image if the field is true.

Is it possible to use Trigger property?

Can you help me with this?

Thanks.

[Jayapradha S]

Hi Diego,

Thank you for using Syncfusion products.

We analyzed your requirement and you can achieve your requirement such as based on the Boolean value. You can show the icon in GridCell by using DataTrigger/Converter as shown in the following code snippet:

Converter helps you to change the visibility of the icon dynamically and also it provides the better performance than DataTriggers.

Code Snippet:

Change the cellicon using DataTriggers:

  <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>

Change the Cell Icon using Converter

  <syncfusion:GridTextColumn MappingName="ShowCellIcon">

                    <syncfusion:GridTextColumn.CellTemplate>

                        <DataTemplate>

                           <Image Source="{Binding Converter={StaticResource iconConverter}, RelativeSource={RelativeSource AncestorType=syncfusion:GridCell}}" />                      </DataTemplate>

                    </syncfusion:GridTextColumn.CellTemplate>

                </syncfusion:GridTextColumn>

public class IconConverter :IValueConverter

    {

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

        {

            var gridCell = value as GridCell;

            var record = gridCell.ColumnBase.Renderer.DataGrid.View.Records[gridCell.ColumnBase.Renderer.DataGrid.ResolveToRecordIndex(gridCell.ColumnBase.RowIndex)];           

            if (((record.Data) as Product).ShowCellIcon)

                return "Images/yes.png";

            else

                return "Images/no.png";

        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

        {

            throw new NotImplementedException();

        }

    }

Please find the sample from the following location:

Sample Link: DataTrigger_and_Converter.zip

Kindly let us know if you require any further assistance on this.

Regards,

Jayapradha

[Diego Fernando Urabayen]

Thank you so much. The solutions are perfect. Regards. Diego

[Jayapradha S]

Hi Diego,

Thank you for your update.

Please let us know if you have any other queries.

Regards,
Jayapradha