Telerik Forums / UI for WinForms
This is a migrated thread and some comments may be shown as answers.

Show Image in Grid View with Text

8 Answers 1302 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Dee
Top achievements
Rank 1
Dee asked on 07 Mar 2013, 02:48 PM
Good Afternoon,

i have a Problem with the Telerik RadGridView. I want to show an Image in a Cell and after the Image a Text in the same Cell. But when i start the Programm i can see Only the Asembly-Path (System.Drawing.Bitmap). What must i do to show the Image.

Yours Sincerly
Dee

8 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 12 Mar 2013, 07:50 AM
Hello Dee,

Thank you for writing.

To do that you should use the CellFormatting event of RadGridView, where you can assign image to the cells in a GridViewTextBoxColumn in additional to their text:
void radGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
{
    if (e.Column.Name == "StringColumn")
    {
        e.CellElement.Image = Resources.folder;
        e.CellElement.ImageAlignment = ContentAlignment.MiddleLeft;
        e.CellElement.TextImageRelation = TextImageRelation.ImageBeforeText;
    }
    else
    {
        e.CellElement.ResetValue(LightVisualElement.ImageProperty, ValueResetFlags.Local);
        e.CellElement.ResetValue(LightVisualElement.ImageAlignmentProperty, ValueResetFlags.Local);
        e.CellElement.ResetValue(LightVisualElement.TextImageRelationProperty, ValueResetFlags.Local);
    }
}

More information about the formatting events of RadGridView can be found here: http://www.telerik.com/help/winforms/gridview-cells-formatting-cells.html.

I hope that you find this information useful. Let us know if you have any other questions.

Greetings,
Stefan
the Telerik team
WinForms Q1 2013 boasts PivotGrid, PDF Viewer, Chart enhancements and more. Check out all of the latest highlights.
0
Allen
Top achievements
Rank 1
answered on 24 Jul 2013, 07:43 AM
this topic fits my problem..

here's mine:

depending on the record, some cells will have text-image-text (like a skype with emoticons in it), and some will have text-text

here's the code:

string IMG = "";
for (int i = 0; i < SourceTable.Rows.Count; i++)
{
    IMG = "";
    if (!String.IsNullOrWhiteSpace(SourceTable.Rows[i][BD].ToString()))
        if (Convert.ToBoolean(SourceTable.Rows[i][BD].ToString()))
            IMG = @"<img src=""res:MyClass.Properties.Resources.birthday_16"">";
 
    SourceTable.Rows[i][TI] = String.Format("<html><b>{0}  {1}</b><br/><i>{2}</i></html>", SourceTable.Rows[i][TI], IMG, SourceTable.Rows[i][DT]);
}

the html tags are rendering ok. but the image tag for a resource image is not rendered. i tried using MyClass.Properties.Resources.birthday_16 and Properties.Resources.birthday_16 but to no avail.

i have other gridviews in the other modules using the cell formatting event.

we all know that cell formatting event is fired everytime.. (when click the control, focused on, shown in the screen (like the window is minimized then maximized, this event is fired))

and i couldn't think of any other way to display a text-image-text.

if this could help in anyway:
it's a 16×16px png file
it's a resource
"TI" and "BD" are string constants

thanks!
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 29 Jul 2013, 07:20 AM
image-text.png
Hello Allen,

Thank you for writing back.

CellFormatting event is fired only for visual cells which is not so many times.
If you still wish to not use the CellFormatting you can use a custom cell. Please have a look at the following help article: http://www.telerik.com/help/winforms/gridview-cells-custom-cells.html

You may use the following code snippet to achive the view from the attached image:
public Form1()
       {
           InitializeComponent();
 
           List<Item> dataItems = new List<Item>
           {
               new Item("First", "Some description", Properties.Resources.birthday),
               new Item("Second", "Some description", Properties.Resources.birthday),
               new Item("Third", "Some description", Properties.Resources.birthday),
               new Item("Fourth", "Some description", Properties.Resources.birthday),
               new Item("Fifth", "Some description", Properties.Resources.birthday),
               new Item("Sixth", "Some description", Properties.Resources.birthday),
               new Item("Seventh", "Some description", Properties.Resources.birthday),
           };
 
           this.radGridView1.Columns.Add(new GridViewTextBoxColumn("Name"));
           this.radGridView1.Columns.Add(new GridViewTextBoxColumn("Description"));
           this.radGridView1.Columns.Add(new CustomImageColumn("Image"));
 
           this.radGridView1.AutoGenerateColumns = false;
           this.radGridView1.DataSource = dataItems;
       }
public class Item
   {
       public string Name { get; set; }
 
       public string Description { get; set; }
 
       public Image Image { get; set; }
 
       public Item(string name, string description, Image image)
       {
           this.Name = name;
           this.Description = description;
           this.Image = image;
       }
   }
 
   public class ImageCell : GridDataCellElement
   {
       public ImageCell(GridViewColumn column, GridRowElement row) : base(column, row)
       {
       }
 
       private StackLayoutElement stackElement;
 
       private LightVisualElement textElement;
 
       private LightVisualElement imageElement;
 
       protected override void CreateChildElements()
       {
           base.CreateChildElements();
           this.stackElement = new StackLayoutElement();
           this.stackElement.StretchHorizontally = true;
           this.stackElement.StretchVertically = true;
           this.textElement = new LightVisualElement();
           this.imageElement = new LightVisualElement();
           stackElement.Children.Add(textElement);
           stackElement.Children.Add(imageElement);
 
           this.Children.Add(stackElement);
       }
 
       protected override void SetContentCore(object value)
       {
           if (this.Value != null && this.Value != DBNull.Value && this.ColumnInfo.Name == "Image")
           {
               Item item = this.RowInfo.DataBoundItem as Item;
 
               if (item != null)
               {
                   this.imageElement.Image = item.Image;
                   this.imageElement.ImageLayout = ImageLayout.Zoom;
                   this.textElement.Text = item.Description;
               }
           }
       }
 
       public override bool IsCompatible(GridViewColumn data, object context)
       {
           return data.Name == "Image" && context is GridDataRowElement;
       }
 
       protected override Type ThemeEffectiveType
       {
           get
           {
               return typeof(GridDataCellElement);
           }
       }
   }
 
   public class CustomImageColumn : GridViewDataColumn
   {
       public CustomImageColumn(string fieldName) : base(fieldName)
       {
       }
 
       public override Type GetCellType(GridViewRowInfo row)
       {
           if (row is GridViewDataRowInfo)
           {
               return typeof(ImageCell);
           }
           return base.GetCellType(row);
       }
   }

Should you have further questions, I would be glad to help.

Regards,
Desislava
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINFORMS.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Allen
Top achievements
Rank 1
answered on 30 Jul 2013, 03:50 AM
Thanks Desislava,

Well, i prefer not to use custom cells. html formatting should be fine since according to the documentation, HTML-like Formatting supports image resources (which i will be using.)

But apparently, my code does not work.. i also tried using a local image, but to no avail. any idea what i could be doing wrong?

Thanks!

PS.
it still looks several times for me :P
0
Allen
Top achievements
Rank 1
answered on 01 Aug 2013, 06:14 AM
anyone?

the res:MyClass.Properties.Resources.birthday_16 is not rendering. local images are rendered ok (i guess i have missed something). but i prefer to use resources in this matter.
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 01 Aug 2013, 08:55 PM
setEmbeddedResource.png
embeddedResource.png
Hello Allen,

Thank you for writing back.

It is necessary to set the resource image as Embedded resource: please see the attached picture setEmbeddedResource.png. When you want to access the resource picture by HTML you should use the following code:
private void radGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
        {
            if (e.CellElement.ColumnInfo.Name == "Image2" && e.CellElement.RowIndex > -1)
            {
                e.CellElement.Text = @"<html><b>image </b><img src=res:ProjectName.Resources.birthday.png width=20 height=20><i>text</i></html>";
            }
        }

N.B. My resource image is birthday.png. "ProjectName" should be replaced with the corresponding name.
I hope this information helps. Should you have further questions, I would be glad to help.

Regards,
Desislava
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINFORMS.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Allen
Top achievements
Rank 1
answered on 02 Aug 2013, 02:24 AM
this works now. thank you.


i thought it would be more like a C# code where MyClass.Properties.Resources.myimage should work. 

my images are added throught MyProject > properties > resources. i thought this is enough, but i have to set the image's Build Action property to "Embedded Resource"
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 06 Aug 2013, 11:19 AM
Hello Allen,

Thank you for writing back.

I am glad that the issue you were facing is now resolved. Please do not hesitate to contact us if you have any additional questions.

It was pleasure for me to assist you.

Regards,
Desislava
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINFORMS.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
Tags
GridView
Asked by
Dee
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Allen
Top achievements
Rank 1
Dess | Tech Support Engineer, Principal
Telerik team
Share this question
or