How to display a image (from the drawable folder) depending on a value of the data

Question

Hi,

I already saw, that I can display images within the SfDataGrid with the GridImageColumn (which also works, when my model has a Bitmap property).

I am now just wondering, if/how I can insert an image depending on a value like a e.g. a boolean-property in my model (Image 1 if true, Image 2 if false, ...).

Is it possible to use some kind of value converter? Or should I use the "Unbound Column" for this?

I would be very happy about a positive. answer

Many Thanks!

Best regards,

Michael

Vigneshkumar Ramasamy · Answer

Hi Michael,  
  
Thanks for contacting Syncfusion support.  
  
We have analyzed your query for “How to display an image (from the drawable folder) depending on a value of the data”. You can achieve this requirement by using the Custom renderer for the GridImageCellRenderer with the OnInitializeDisplayView and OnUpdateDisplayValue Override method where you can display the image based on the bool property in the Model collection. Each Renderer has a specific key using which the custom renderer can be registered to the SfDataGrid.CellRenderers collection. Remove the key from collection and add a new entry with the same key along with the instance of custom renderer to register. Refer the below code example.  
  




  
dataGrid.CellRenderers.Remove("Image");  
dataGrid.CellRenderers.Add("Image", new GridImageCellRendererExt());  
  
public class GridImageCellRendererExt : GridImageCellRenderer  
{  
    OrderInfoRepository viewModel;  
    public GridImageCellRendererExt()  
    {  
        viewModel = new OrderInfoRepository();  
    }  
  
    public override void OnInitializeDisplayView(DataColumnBase dataColumn, ImageView view)  
    {  
        base.OnInitializeDisplayView(dataColumn, view);  
        if(!(dataColumn.RowData as OrderInfo).IsClosed)  
        {  
             view.SetImageBitmap(Imagehelper.ToUIImage(new ImageMapStream(viewModel.LoadResourc("ticket.png").ToArray())));  
        }  
    }  
  
    public override void OnUpdateDisplayValue(DataColumnBase dataColumn, ImageView view)  
    {  
        base.OnUpdateDisplayValue(dataColumn, view);  
        if (!(dataColumn.RowData as OrderInfo).IsClosed)  
        {  
            view.SetImageBitmap(Imagehelper.ToUIImage(new ImageMapStream(viewModel.LoadResourc("ticket.png").ToArray())));  
        }  
    }  
  
}  
  
We have attached a sample for your requirement and you can download from the following link  
http://www.syncfusion.com/downloads/support/directtrac/general/ze/GridImageColumn1549106985   
  
Regards,  
Vigneshkumar R

Michael · Answer

Hi Vigneshkumar,

Thank you very much, for your answer and the attached code sample.

Ok, I managed to implement an event, which gets invoked, when the switch is checked / unchecked - inside a CustomGridCellSwitchRenderer.

But how can I change the image (depending on the switch value).

(I want to change the displayed image, depending on the value of the checkbox. Like: checked -> image1 | not checked -> image2 ...)

Thanks in advance!

Best,

Michael

Vigneshkumar Ramasamy · Answer

Hi Michael,  
  
Thanks for the Update.  
  
We have analyzed your last updated query with the extra added requirement to display an image in the Image column depending upon the value of the checkbox. You can achieve your requirement by using the ValueChanged event for the GridSwitchColumn which notify the toggling action in the switch and you can change the image depending upon the action using this event. Refer the below code example.  
  




GridSwitchColumn switchcolumn=new GridSwitchColumn();  
switchcolumn.MappingName = "IsClosed";  
switchcolumn.ValueChanged += Switchcolumn_ValueChanged;  
  
private void Switchcolumn_ValueChanged(object sender, ValueChangedEventArgs e)  
{  
    if (!e.NewValue)  
    {  
        viewModel.OrderInfoCollection[e.RowColIndex.RowIndex - 1].Image = Imagehelper.ToUIImage(new ImageMapStream(viewModel.LoadResource("ticket.png").ToArray()));  
    }  
    else  
        viewModel.OrderInfoCollection[e.RowColIndex.RowIndex - 1].Image = Imagehelper.ToUIImage(new ImageMapStream(viewModel.LoadResource("image1.png").ToArray()));  
}  
  
We have attached the prepared sample and you can download from the following link  
http://www.syncfusion.com/downloads/support/directtrac/general/ze/ImageBasedontoggling-1248000567   
  
Regards,  
Vigneshkumar R

Michael · Answer

Hi Vigneskumar, Thanks!Now it works. In the end, the problem was not adding the RaisePropertyChanged event properly.After I did this, everything was fine ;) Best, Michael

Vigneshkumar Ramasamy · Answer

Hi Michael 
 
We glad to know that your requirement has been achieved. Please get in touch if you required further assistance on this. 
   
Regards