We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How to change image in datagrid cell based on data trigger

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.

3 Replies

JS Jayapradha S Syncfusion Team April 13, 2015 11:58 AM UTC

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



DF Diego Fernando Urabayen April 13, 2015 12:30 PM UTC

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


JS Jayapradha S Syncfusion Team April 14, 2015 05:45 AM UTC

Hi Diego,

Thank you for your update.

Please let us know if you have any other queries.

Regards,
Jayapradha

Loader.
Live Chat Icon For mobile
Up arrow icon