How to get the value from a data bound field for CommentTip.CommentImage?

[Paulo P]

Hi.
I have a GridGroupingControl bound to a table where one of the columns holds a student's name and another column holds the respective photo. How to get these values in order to feed CommentTip.CommentText and CommentTip.CommentImage? I know this is illustraded in the demo provided with the product but I want to get the image from a bound column and not from an external file as it occurs with the demo.
Many thanks.

[Mohanraj Gunasekaran]

Hi Paulo, 

Thanks for using Syncfusion product. 

In order to achieve your scenario by using the Byte[] data type. We have prepared the sample based on your requirement. Please refer to the below code example and the sample, 

Code example 

 

this.gridGroupingControl1.QueryCellStyleInfo += gridGroupingControl1_QueryCellStyleInfo; 

void gridGroupingControl1_QueryCellStyleInfo(object sender, Syncfusion.Windows.Forms.Grid.Grouping.GridTableCellStyleInfoEventArgs e) 

{ 

    if (e.Style.TableCellIdentity.Column != null && e.Style.TableCellIdentity.Column.Name == "Name" 

        && e.TableCellIdentity.DisplayElement != null && e.TableCellIdentity.DisplayElement.Kind == Syncfusion.Grouping.DisplayElementKind.Record) 

    { 

        Record record = e.TableCellIdentity.DisplayElement.GetRecord(); 

        //Set the comment text, comment image and fore color. 

        e.Style.CommentTip.CommentText = e.Style.Text; 

        var value = record.GetValue("Image"); 

        Icon icon = this.BytesToIcon((value as Byte[])); 

        e.Style.CommentTip.CommentImage = icon.ToBitmap(); 

        e.Style.CommentTip.ForeColor = Color.Red; 

    } 

} 

 

Sample link: GridGroupingControl 

 

Please let us know if you have any concerns. 

 

Regards, 

Mohanraj G 

[Paulo P]

Thank you for your reply.

Actually, since I already have a bitmap in a column (which is automatically stretched to fit cell) your code sample did not help very much. I found a way to work it out though: 

                        e.Style.CommentTip.CommentText = e.Style.Text;

                        Byte[] data = new Byte[0];

                        data = (Byte[])value;

                        MemoryStream mem = new MemoryStream(data);

                        e.Style.CommentTip.CommentImage = Image.FromStream(mem);

                        e.Style.CommentTip.ForeColor = Color.Red;

Now, the image is quite large and is displayed in CommentTip area as such which is not very useful. 

Is there a way to stretch it as if it were for a picture control?

Thanks.

[Mohanraj Gunasekaran]

Hi Paulo, 

 

Thanks for your update. 

 

By default, CommentTip does not have the direct support to stretch the image in CommentTipWindow because we have use the label control to show the CommentTip. But, you can achieve your scenario by removing the default label and add the new label, PictureBox control inside of the CommentTipWindow using CommentTipShown event. Please refer to the below code example and the sample, 

 

Code example 

this.gridGroupingControl1.TableControl.CommentTipShown += TableControl_CommentTipShown;  

 

void TableControl_CommentTipShown(object sender, CommentTipShownEventArgs e) 

{ 

    if (e.CommentTipWindow.Controls.Count > 0) 

    { 

        //Clear the default control(label) 

        e.CommentTipWindow.Controls.Clear(); 

    } 

    //Label to show the text at top of the CommentTip window 

    Label lbl = new Label(); 

    lbl.Dock = DockStyle.Top; 

    lbl.Text = e.Style.CommentTip.CommentText; 

    e.CommentTipWindow.Controls.Add(lbl); 

 

    //Picture box to show the image. 

    PictureBox picBox = new PictureBox(); 

    picBox.Dock = DockStyle.Bottom; 

    picBox.BringToFront(); 

    picBox.Image = e.Style.CommentTip.CommentImage; 

    picBox.SizeMode = PictureBoxSizeMode.StretchImage; 

    e.CommentTipWindow.Controls.Add(picBox); 

    e.CommentTipWindow.Size = new Size(150, 80); 

} 

 

Sample link: GridGroupingControl 

 

Screenshot 

 

 

Regards, 

Mohanraj G 

 

[Paulo P]

Hi.

Thank you for your quick reply.

Your suggestion works fine for my purpose.

I just have now a problem trying to set the comment tip column to the image column itself. The red mark appears but when I hover over the column the comment tip does not show.

In sample attached, I set comment tip column to col_1 and it works but if I set comment tip column to col_2 it does not work.

Would you please help?

Thanks.

Attachment: Test_48e52910.zip

[Paulo P]

Hi.

After some hours of intense fight, I found out that the issue has nothing to do with the type of column but rather with its position in the grid. Actually, comment tip window shows up on the right side of the column it is related with, so for the last visible column of the grid, it is displayed out of the grid visible area. So, the way to overcome such limitation is by adjusting the CommentTipWindow location within the TableControl_CommentTipShown event.

Thanks.

[Mohanraj Gunasekaran]

Hi Paulo, 

Thanks for your update. 

Yes, you were right. If you would like to show the CommenTip for last column within the grid visible area, you can adjust the CommentTip window location using CommentTipShowing or CommentTipShown event. Please refer the following UG link, 

UG link: https://help.syncfusion.com/windowsforms/gridgrouping/commenttip#changing-the-location-of-comment-tip-window  

Anyway, we are glad to know that your reported problem has resolved at your end. 

Please let us know if you have any concerns. 

Regards, 

Mohanraj G