GridImageColumn not working

[Dimitri]

Dear Syncfusion,

I am trying to make a DataGrid in a desktop windows form application where the first column contains a picture. I found many examples but none for the desktop windows form version. It shows all the data (strings, ints bools) correctly, only it shows no images (it just shows blank cells).

What I have:

In the designer I have a sfDataGrid named sfDataGrid1

In the main form I initialize the column:

sfDataGrid1.Columns.Add(new GridImageColumn() { MappingName = "Flag" });

data object class

ImageSource sFlag;

public ImageSource Flag

        {

            get { return sFlag; }

            set { sFlag = value; }

        }

public VerwerkingsInfo(ImageSource flag, string documentName, string tabName1, string tabName2, string tabName3, string tabName4, int rowsTransported, bool successful) {

            this.Flag = flag;

            this.DocumentName = documentName;

            this.TabName1 = tabName1;

            this.TabName2 = tabName2;

            this.TabName3 = tabName3;

            this.TabName4 = tabName4;

            this.RowsTransported = rowsTransported;

            this.bSuccessful = successful;

        }

//And to fill the data

private void GenerateInfo()

        {

            _info.Add(new VerwerkingsInfo(

                ImageSource.FromFile(@"C:\Users\...........png"), //Change this to real path!

                "string1",

                "string1",

                "string1",

                "string1",

                "string1",

                24,

                true

                ));

(see attached files for the whole code).

PS: I deleted the paths of the images, but normally I use the full path to the image.

So basically, how come my SfDatagrid shows no images? Is it because I use the ImageSource class? Or am I missing something or?

Attachment: UpdateMasterExcelDocument_8b3b2fb3.zip

[Shobika Palani]

Hi Dimitri, 

Thank you for contacting Syncfusion Support. 

We have analyzed your requirement to load image using GridImageColumn in SfDataGrid. On further analyzing the code files that you have shared with us, we found that ImageSource is referred from Xamarin.Forms and you are using Winforms SfdataGrid. By default, Winforms SfDataGrid does not have support for ImageSource.  

However, you can achieve this by using Image and SfDataGrid.DrawCell method. We have prepared a demo sample based on the code files shared and please find the sample from the link below 

Sample Link: 

https://www.syncfusion.com/downloads/support/forum/148556/ze/CS1509231522  

If we misunderstood your requirement, please provide more information on your requirement. Also please confirm us on which platform you are using. This would help us to proceed further. 

Regards, 

Shobika. 

[Dimitri]

Dear Syncfusion,

The platform I am using is indeed Winforms. And this is almost (about 90%) what I was searching for.

In your example on page Form1.cs in method sfDataGrid_DrawCell you are using: 

 e.Graphics.DrawImage(Image.FromFile(@"../../US.jpg"), new Rectangle(e.Bounds.X + 50, e.Bounds.Y + 2, e.Bounds.Width - 100, e.Bounds.Height - 5));

Only this line takes 1 specific image "../../US.jpg" and uses the same image for the whole column. And does not uses the provided Image data from VerwerkingsInfoCollection.cs. I have tried some things myself (see zip) but I can't manage to correct the method so that it uses the provided images.

PS: the variable "object sender" does have the correct data including the images that I need but if I make a foreach loop (see new zip) it just uses the last image in the for loop for the whole column.

EDIT: The second I posted this it occurred to me how to fix it. My apologies if you have read it before my edit.

This is how I changed the code for the people who have the same problem as I did and also want to solve it: The following line "this.sfDataGrid1.DrawCell += sfDataGrid_DrawCell;" uses a DrawCell event that fires for each cell that needs drawing. So if you change the "sfDataGrid_DrawCell" method to the following it will look for the right image in the DataSource.

void sfDataGrid_DrawCell(object sender, DrawCellEventArgs e)

        {

            int rowNr = e.RowIndex-1;

            if (e.DataRow.RowType != RowType.HeaderRow && e.ColumnIndex == 1)

            {

                SfDataGrid sfDataGrid = (SfDataGrid)sender;

                List dataSource = (List)sfDataGrid.DataSource;

                Image image = dataSource[rowNr].Flag;

                e.Handled = true;

                e.Graphics.DrawImage(image, new Rectangle(e.Bounds.X + 50, e.Bounds.Y + 2, e.Bounds.Width - 100, e.Bounds.Height - 5));

                //e.Graphics.DrawString(e.DisplayText, e.Style.GetFont(), new SolidBrush(e.Style.TextColor), new RectangleF(e.Bounds.X + 500, e.Bounds.Y + 10,                e.Bounds.Width, e.Bounds.Height - 5));

                Pen borderPen = new Pen(Color.LightGray);

                e.Graphics.DrawLine(new Pen(e.Style.Borders.Right.Color), e.Bounds.Right - 1, e.Bounds.Top, e.Bounds.Right - 1, e.Bounds.Bottom);

                e.Graphics.DrawLine(new Pen(e.Style.Borders.Bottom.Color), e.Bounds.Left, e.Bounds.Bottom - 1, e.Bounds.Right, e.Bounds.Bottom - 1);

            }

        }

Also: change all occurrences of "ObservableCollection" in VerwerkingsInfoCollection.cs to "List" (change ObservableCollection into List)

PS: Thanks for the solution and help.

Attachment: MainForm_fe60e932.zip

[Farjana Parveen Ayubb]

Hi Dimitri,  

 

Thanks for the update. 

 

We are glad to know that the reported problem has been resolved at your end. Please let us know if you have any further queries on this. We are happy to help you. 

 

Regards, 

Farjana Parveen A