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.
Unfortunately, activation email could not send to your email. Please try again.

How to change image in datagrid cell based on data trigger

Thread ID:

Created:

Updated:

Platform:

Replies:

118819 Apr 12,2015 10:41 AM Apr 14,2015 01:45 AM WPF 3
loading
Tags: SfDataGrid
Diego Fernando Urabayen
Asked On April 12, 2015 10:41 AM

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 [Syncfusion]
Replied On April 13, 2015 07:58 AM

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
Replied On April 13, 2015 08:30 AM

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

Jayapradha S [Syncfusion]
Replied On April 14, 2015 01:45 AM

Hi Diego,

Thank you for your update.

Please let us know if you have any other queries.

Regards,
Jayapradha

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;