Hide text in column when showing GridImageColumn

[David A]

Hi, I have a sfdatagrid in a winforms app.  It is defined like this:

            for (int i = 1; i <= _MaxImages; i++)

            {

                var imgGC = new GridImageColumn

                {

                    MappingName = $"Image{i}",

                    HeaderText = $"Image{i}",

                    TextImageRelation = TextImageRelation.ImageAboveText,

                    ImageLayout = ImageLayout.Zoom

                };

                sfdgOutput.Columns.Add(imgGC);

            }

       private void sfdgOutput_QueryImageCellStyle(object sender, Syncfusion.WinForms.DataGrid.Events.QueryImageCellStyleEventArgs e)

        {

            var row = (DataRowView)e.Record;

            var val = row.Row.ItemArray[e.ColumnIndex];

            if (val.ToString() != "")

                e.Image = Image.FromFile(_outputFolder + "/" + val);

        }

For some reason, I cannot hide the text that shows, it is the filename that I am showing.  I want the headers to appear and the grid to function as is does, but I would like to avoid the overlayed image filename as shown below.

[Dhanasekar Mohanraj]

Hi David Avery, 

Thank you for using Syncfusion Controls. 

TextImageRelation Property works only when ImageLayout property is equal to None. Please refer the below user guide documentation for more Information’s 

UG link: https://help.syncfusion.com/windowsforms/datagrid/columntypes#positioning-text-and-image 

 

We suspect your requirement is add the image from the folder If yes you can achieve this like below, 

sfDataGrid1.QueryImageCellStyle += SfDataGrid1_QueryImageCellStyle; 

private void SfDataGrid1_QueryImageCellStyle(object sender, Syncfusion.WinForms.DataGrid.Events.QueryImageCellStyleEventArgs e) 

{ 

    var employee = (DataRowView)e.Record; 

    e.Image = (Image.FromFile(@"..\..\Image\"+ employee.Row.ItemArray[3].ToString()+".png")); 

} 

We have prepared the sample for the same, 

Sample link: https://www.syncfusion.com/downloads/support/forum/160853/ze/Image_Column777199781 

 

Else can you please explain your scenario. We hope it helps please let us know if you need further assistance. 

Regards, 

Dhanasekar Mohanraj. 

[David A]

Thank you.  That "TextImageRelation = TextImageRelation.ImageAboveText," was just me trying to make it move/go away.  

I had coded my QueryImageCellStyle like yours and had attached it in the original request and it is what is making the text appear.

My intent is to have no text at all showing, only the image, but keep the headers.  Do you see in the attachment how the filename overwrites the image?

[Mohanram Anbukkarasu]

Hi David, 

Thanks for the update.  

In the sample we have provided in our previous update, we have displayed only the images in the image column without any text as per your requirement. Please have a look at the sample and revert to us with more details if we have missed any customization you have done in your application. It will be helpful for us to find the exact cause for the problem and to provide a prompt solution.  

Regards, 

Mohanram A. 

[David A]

Hi, I we are missing one another. In your sample, you are not setting data into the flag column.  Note the last column is blank.

employeeCollection.Rows.Add(1001, "SAKIA", "Mariana", "Germany", "");

If I populate that column, the text shows as in the picture below.

employeeCollection.Rows.Add(1001, "SAKIA", "Mariana", "Germany", "test");

For my application, this is a valid column that has a value - it is a series of up to 18 columns.  I need to read each one to determine what image thumbnail to show.  If I remove the binding, I can still reference the data in the underlying dataset to get the image to show but I then cannot get a real heading to show (it defaults Column n evenb if I set the heading as below.  

      // image columns 

            for (int i = 1; i <= _MaxImages; i++)

            {

                var imgGC = new GridImageColumn

                {

                    //MappingName = $"Image{i}",

                    HeaderText = $"Image{i}",

                    ImageLayout = ImageLayout.Zoom

                };

                sfdgOutput.Columns.Add(imgGC);

            }

My goal is to have these columns not show the underlying text but be actually bound.  Is there a way to override this?  It is not an option to have up to 18 empty placeholders in my data.  Thanks

[David A]

Ok, I solved it.  I added e.DisplayText="" to the QueryImageCellStyle.  

        private void sfdgOutput_QueryImageCellStyle(object sender,

            Syncfusion.WinForms.DataGrid.Events.QueryImageCellStyleEventArgs e)

        {

            var row = (DataRowView)e.Record;

            var val = row.Row.ItemArray[e.ColumnIndex];

            if (val.ToString() != "")

                e.Image = Image.FromFile(_outputFolder + "/" + val);

            e.DisplayText = "";

        }

[Mohanram Anbukkarasu]

Hi David, 

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.  

Regards, 

Mohanram A.